lavaLamp 不輸 Flash 的jQuery 動態按鈕效果

lavaLamp 是一款具有動態移動效果的按鈕列特效 , 視覺效果非常優秀 ! 來看一下官網展示 lavaLamp 感受一下 !

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








使用方式：
１。先在網站頂頭呼叫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>
    

複製代碼

２。製作按鈕列記得 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>
   

複製代碼