你的位置:首页 > 软件开发 > Java > 手风琴菜单、层级菜单、置顶菜单、无缝滚动、幻灯片的制作

手风琴菜单、层级菜单、置顶菜单、无缝滚动、幻灯片的制作

发布时间:2017-07-23 00:00:12
一、手风琴菜单效果图及代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 &l ...

手风琴菜单、层级菜单、置顶菜单、无缝滚动、幻灯片的制作

一、手风琴菜单效果图及代码如下:

手风琴菜单、层级菜单、置顶菜单、无缝滚动、幻灯片的制作

手风琴菜单、层级菜单、置顶菜单、无缝滚动、幻灯片的制作手风琴菜单、层级菜单、置顶菜单、无缝滚动、幻灯片的制作
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>手风琴效果制作</title> 6   <link rel="stylesheet" href="../css/reset.css"> 7   <style> 8     .con{ 9       width:908px; 10       height:300px; 11       margin:50px auto; 12       overflow: hidden; 13       position:relative; 14     } 15     .con .list_ul{ 16     } 17     .con .list_ul li{ 18       width:805px; 19       height:300px; 20       position:absolute; 21       background:#fff; 22     } 23     .con .list_ul li span{ 24       width:26px; 25       height:296px; 26       text-align: center; 27       color:#fff; 28       padding-top:4px; 29       float:left; 30       cursor: pointer; 31     } 32     .con .list_ul li img{ 33       width:777px; 34       height:300px; 35       float:right; 36     } 37     .con .list_ul li:after{ 38       display: table; 39       clear:both; 40       zoom:1; 41       content: ''; 42     } 43     .con .list_ul li:nth-child(1){ 44       left:0; 45     } 46     .con .list_ul li:nth-child(2){ 47       left:801px; 48     } 49     .con .list_ul li:nth-child(3){ 50       left:828px; 51     } 52     .con .list_ul li:nth-child(4){ 53       left:855px; 54     } 55     .con .list_ul li:nth-child(5){ 56       left:882px; 57     } 58     .con .list_ul li:nth-child(1) span{ 59       background: rgba(8, 201, 160, 0.49); 60     } 61     .con .list_ul li:nth-child(2) span{ 62       background: rgba(120, 201, 66, 0.97); 63     } 64     .con .list_ul li:nth-child(3) span{ 65       background: rgb(77, 114, 201); 66     } 67     .con .list_ul li:nth-child(4) span{ 68       background: rgb(255, 179, 18); 69     } 70     .con .list_ul li:nth-child(5) span{ 71       background: rgb(201, 5, 166); 72     } 73   </style> 74   <script src='/images/loading.gif' data-original="../js/jquery-1.12.4.min.js"></script> 75   <script> 76     $(function(){ 77       $(".list_li").click(function(){ 78         //左边 79         $(this).animate({left:26*$(this).index()}); 80         //获取该li元素前面的兄弟元素,实现点击中间的部分,它前面的兄弟元素也跟着一起向左移动 81         $(this).prevAll().each(function(){ 82           $(this).animate({left:26*$(this).index()}); 83         }); 84         //右边:获取该li元素后面的兄弟元素,实现点击中间的部分,它后面的兄弟元素也跟着一起向右移动 85         $(this).nextAll().each(function(){ 86           $(this).animate({left:778+26*$(this).index()}); 87         }); 88       }) 89     }) 90   </script> 91 </head> 92 <body> 93   <div class="con"> 94     <ul class="list_ul"> 95       <li class="list_li"> 96         <span>风景图01</span> 97         <img src='/images/loading.gif' data-original="../images/li01.png" > 98       </li> 99       <li class="list_li">100         <span>风景图02</span>101         <img src='/images/loading.gif' data-original="../images/li02.png" >102       </li>103       <li class="list_li">104         <span>风景图03</span>105         <img src='/images/loading.gif' data-original="../images/li03.png" >106       </li>107       <li class="list_li">108         <span>风景图04</span>109         <img src='/images/loading.gif' data-original="../images/li04.png" >110       </li>111       <li class="list_li">112         <span>风景图05</span>113         <img src='/images/loading.gif' data-original="../images/li05.png" >114       </li>115     </ul>116   </div>117 </body>118 </html>

原标题:手风琴菜单、层级菜单、置顶菜单、无缝滚动、幻灯片的制作

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录