搜索
SR數位設計 ECSHOP RWD響應式技術開發 JS程式語法 lavaLamp 不輸 Flash 的jQuery 動態按鈕效果
byadmin 發表於 2013-5-7 03:07:15 , 3485人已閱讀 , 0人回應
lavaLamp 是一款具有動態移動效果的按鈕列特效 , 視覺效果非常優秀 ! 來看一下官網展示 lavaLamp 感受一下 !

官方範例中提供了三種效果 , 只要會寫CSS lavaLamp 的展式樣式可以說是千變萬化 , 絕對比Flash按鈕有過之而無不及 ..

lavalamp_01.jpg


lavalamp_02.jpg


lavalamp_03.jpg



使用方式:
1。先在網站頂頭呼叫CSS與JQ程式庫與效果檔
  1. <span style="font-size: 14px; line-height: 1.5;">    <link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen"></span>
  2.     <script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
  3.     <script type="text/javascript" src="jquery.easing.min.js"></script>
  4.     <script type="text/javascript" src="jquery.lavalamp.min.js"></script>
  5.     <script type="text/javascript">
  6.         $(function() {
  7.             $("#1").lavaLamp({       //"#1"可以帶入多ID或是CLASS可在同頁面展示不同效果
  8.                 fx: "backout",
  9.                 speed: 700,
  10.                 click: function(event, menuItem) {
  11.                     return false;
  12.                 }
  13.             });
  14.         });
  15.     </script>
複製代碼
2。製作按鈕列記得 id="*" 要和上面 function 中相呼應 , 不然不會有效果喔 ..
  1. <span style="font-size: 14px; line-height: 1.5;"><ul class="lavaLampWithImage" id="1"></span>
  2.     <li><a href="#">Home</a></li>
  3.     <li><a href="#">Plant a tree</a></li>
  4.     <li><a href="#">Travel</a></li>
  5.     <li><a href="#">Ride an elephant</a></li>
  6. </ul>
複製代碼

lavalamp_0.1.0.zip

18.32 KB, 閱讀權限: 10, 下載次數: 28

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP響應式技術開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:service@uniflow.com.tw 連絡電話03-3555-069 (時間AM10:00~PM7:30)

, Processed in 0.195699 second(s), 43 queries , Gzip On.

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

Core - DZ2.5 GMT+8, 2017-1-23 06:19

回頂部