搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 JS程式語法 spin.js 完全自製的 JQuery Loading 動畫
byadmin 發表於 2013-6-1 02:16:01 , 9876人已閱讀 , 0人回應
2013-06-01_013224.jpg


平常見到的loading畫面都是使用gif 來製作動畫圖標,現在可以使用jquery來製作客製化的loading樣式囉 ! 無論是光暈長度、圓角、顏色、速度...等等都可以依據自己喜好來自定義 , 是不是很有趣呢? 先來看一下效果吧:

《各種自定義樣式》
loading.jpg



spin.js 使用教學


第一步、網頁head帶入spin.js檔案以及jquery程式庫:
  1. <script type="text/javascript" src="spin.min.js"></script>
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
複製代碼
第二步、帶入spin function等自定義參數值 , 可以在官網網站的編輯器測試相關參數值喔:
  1. $(function(){  
  2. var opts = {
  3.      lines: 13, // loading光暈長條的數量
  4.      length: 7, // 光暈長條的長度
  5.      width: 4, // 光暈長條的寬度
  6.      radius: 10, // 整個圓形的半徑
  7.      corners: 1, // 光暈長條的圓角
  8.      rotate: 0, // loading動畫的旋展度數 (因為本身已經動態旋轉了所以這個沒什麼調整必要)
  9.      color: '#000', // 顏色
  10.      speed: 1, // 速度
  11.      trail: 60, // 動作餘暉的百分比
  12.      shadow: false, // 是否渲染出陰影
  13.      hwaccel: false, // 是否啟用硬體加速
  14.      className: 'spinner', // 給loading添加的class樣式名稱
  15.      zIndex: 2e9, // z軸的層級 (預設2000000000)
  16.      top: 'auto', // top相對定位
  17.      left: 'auto' // left相對定位
  18. };
  19.    var target = document.getElementById('loading'); //loading為自定義ID要和HTML中的ID相同
  20.     var spinner = new Spinner(opts).spin(target);
  21. })
複製代碼
當上面function 部分定義完畢後 , html部分很簡單 , 只需要將DIV帶入剛剛最後定義的ID名稱 , 就可以將loading動畫效果帶入頁面中,例如:
  1. <div id="loading"></div>
複製代碼
是不是很簡單呢~ 趕緊來動手試試看吧 :)

spin一款jq的loading效果.rar (7.45 KB, 下載次數: 62)
Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.111328 second(s), 41 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-12-3 07:48

回頂部