百叶窗折叠图片

百叶窗折叠图片

 

演示

 

JavaScript Code

1. <script language="javascript">  
2. $(document).ready(function(){  
3.       
4.     ///single  
5.     $("ul#single li").mouseover(function(){  
6.         $(this).stop().animate({height:'400px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
7.     });  
8.   
9.     $("ul#single li").mouseout(function(){  
10.          $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
11.     });  
12.       
13.     //horizontal  
14.     $("ul#horizontal li").mouseover(function(){  
15.         $(this).stop().animate({width:'650px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
16.     });  
17.   
18.     $("ul#horizontal li").mouseout(function(){  
19.         $(this).stop().animate({width:'40px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
20.     });  
21.       
22.     //vertical  
23.      $("ul#vertical li").mouseover(function(){  
24.         $(this).stop().animate({height:'400px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
25.     });  
26.   
27.     $("ul#vertical li").mouseout(function(){  
28.         $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
29.     });  
30.   
31. });  
32. </script>   

 

原文地址:http://www.freejs.net/article_jquerytupiantexiao_300.html