jQuery实现的手风琴效果

Posted Carina

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery实现的手风琴效果相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11         ul{
12             list-style: none;
13         }
14 
15         .wrap {
16             width: 1010px;
17             margin: 100px auto 0;
18         }
19         .wrap li{
20             width: 200px;
21             height: 400px;
22             float: left;
23         }
24     </style>
25     <script src="../jquery-1.11.1.min.js"></script>
26     <script>
27         $(document).ready(function () {
28          $(.wrap li).each(function(i,ele){
29              $(ele).css("background","url(images/"+ (i + 1) +".jpg)");
30          }).mouseenter(function(){
31              $(this).stop().animate({width:600},500).siblings(li).stop().animate({width:100},500)
32          }).mouseleave(function(){
33              $(.wrap li).stop().animate({width:200},500);
34 
35          })
36         });
37     </script>
38 </head>
39 <body>
40 <div class="wrap">
41     <ul>
42         <li></li>
43         <li></li>
44         <li></li>
45         <li></li>
46         <li></li>
47     </ul>
48 </div>
49 </body>
50 </html>

 

以上是关于jQuery实现的手风琴效果的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现手风琴效果

jQuery实现手风琴效果

jQuery实现手风琴效果

jquery实现简单的手风琴效果

jquery 实现简单的手风琴效果

jQuery实现的手风琴效果