一、手风琴菜单效果图及代码如下: 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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:手风琴菜单、层级菜单、置顶菜单、无缝滚动的制作
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。