手風琴菜單、層級菜單、置頂菜單、無縫滾動、幻燈片的製做

1、手風琴菜單效果圖及代碼以下:

  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="../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/li01.png" alt="風景圖01">
 98             </li>
 99             <li class="list_li">
100                 <span>風景圖02</span>
101                 <img src="../images/li02.png" alt="風景圖02">
102             </li>
103             <li class="list_li">
104                 <span>風景圖03</span>
105                 <img src="../images/li03.png" alt="風景圖03">
106             </li>
107             <li class="list_li">
108                 <span>風景圖04</span>
109                 <img src="../images/li04.png" alt="風景圖04">
110             </li>
111             <li class="list_li">
112                 <span>風景圖05</span>
113                 <img src="../images/li05.png" alt="風景圖05">
114             </li>
115         </ul>
116     </div>
117 </body>
118 </html>
手風琴菜單

2、上卷下拉式(層級)菜單效果圖和代碼以下:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>用jQuery中的slideToggle製做菜單</title>
  6     <link rel="stylesheet" href="../css/reset.css">
  7     <style>
  8         .menu{
  9             width:200px;
 10             margin:10px auto;
 11         }
 12         .menu>li{
 13             background: #8731dd;
 14             color:#fff;
 15             text-indent: 16px;
 16             margin-top:-1px;
 17             cursor: pointer;
 18         }
 19         .menu>li>span{
 20             padding:10px 0;
 21             display:block;
 22             border-bottom: 1px solid #f3f3f3;
 23         }
 24         .menuactive,.menu>li>span:hover{
 25             background:#c7254e;
 26         }
 27         .menu > li ul{
 28             display: none;
 29         }
 30         .menu > li ul li{
 31             text-indent:20px;
 32             background: #9a9add;
 33             border:1px solid #f3f3f3;
 34             margin-top:-1px;
 35             padding:6px 0;
 36         }
 37         .menu >li .active{
 38             display: block;
 39 
 40         }
 41         .menu > li ul li:hover{
 42             background:#67C962;
 43         }
 44         .menu_li ul{
 45             margin-bottom:1px;
 46         }
 47     </style>
 48     <script src="../js/jquery-1.12.4.min.js"></script>
 49     <script>
 50         $(function () {
 51             $(".menu_li>span").click(function(){
 52                 $(this).addClass("menuactive").parent().siblings().children("span").removeClass("menuactive");
 53                 $(this).next("ul").slideToggle();
 54                 $(this).parent().siblings().children("ul").slideUp();
 55             })
 56         })
 57     </script>
 58 </head>
 59 <body>
 60 <ul class="menu" id="menu">
 61     <li class="menu_li">
 62         <span class="menuactive">水果系列</span>
 63         <ul class="active">
 64             <li>蘋果</li>
 65             <li>梨子</li>
 66             <li>葡萄</li>
 67             <li>火龍果</li>
 68         </ul>
 69     </li>
 70     <li class="menu_li">
 71         <span>海鮮系列</span>
 72         <ul>
 73             <li></li>
 74             <li>大蝦</li>
 75             <li>螃蟹</li>
 76             <li>海帶</li>
 77         </ul>
 78     </li>
 79     <li class="menu_li">
 80         <span>果蔬系列</span>
 81         <ul>
 82             <li>茄子</li>
 83             <li>黃瓜</li>
 84             <li>豆角</li>
 85             <li>西紅柿</li>
 86         </ul>
 87     </li>
 88     <li class="menu_li">
 89         <span>速凍食品</span>
 90         <ul>
 91             <li>水餃</li>
 92             <li>冰淇淋</li>
 93         </ul>
 94     </li>
 95     <li class="menu_li">
 96         <span>肉質系列</span>
 97         <ul>
 98             <li>豬肉</li>
 99             <li>羊肉</li>
100             <li>牛肉</li>
101         </ul>
102     </li>
103 </ul>
104 </body>
105 </html>
層級菜單

3、置頂菜單(當一個菜單到達頁面頂部時,停在那)

  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         .header{
  9             width:960px;
 10             height:200px;
 11             margin:0 auto;
 12             background: #ccc;
 13         }
 14         .header img{
 15             width:100%;
 16             height:200px;
 17         }
 18         .ul_list{
 19             width:960px;
 20             height:50px;
 21             margin:0 auto;
 22             text-align: center;
 23             display: flex;
 24             justify-content: space-between;/*實現子元素水平方向上平分*/
 25             align-items: center;/*使子元素垂直方向上居中*/
 26             background: #67C962;
 27         }
 28         .ul_list li{
 29             width:160px;
 30             height:50px;
 31             line-height: 50px;
 32             border:1px solid #ccc;
 33             /*使邊框合併*/
 34             margin-right:-1px;
 35         }
 36         .ul_list li a{
 37             color:#fff;
 38         }
 39         .ul_list li:hover{
 40             background: #c7254e;
 41         }
 42         .ul_fixed{
 43             position: fixed;
 44             top:0;
 45         }
 46         .menu_pos{
 47             width:960px;
 48             height:50px;
 49             margin:0 auto;
 50             line-height: 50px;
 51             display: none;
 52         }
 53         .con div{
 54             width:958px;
 55             height:300px;
 56             line-height: 300px;
 57             text-align: center;
 58             margin:-1px auto 0;
 59             border: 1px solid #ccc;
 60         }
 61         .footer{
 62             height:300px;
 63         }
 64         .top{
 65             width:38px;
 66             height:38px;
 67             border-radius: 35px;
 68             background: #000;
 69             color:#fff;
 70             font-size:13px;
 71             padding:8px;
 72             text-align: center;
 73             position: fixed;
 74             right:100px;
 75             bottom:20px;
 76             display: none;
 77         }
 78         .top:hover{
 79             cursor: pointer;
 80         }
 81     </style>
 82     <script src="../js/jquery-1.12.4.min.js"></script>
 83     <script>
 84         $(function(){
 85             var oLeft = ($(document).outerWidth(true)-$(".header").outerWidth())/2;
 86             var oTop = $(".top");
 87             $(window).scroll(function(){
 88                 if($(window).scrollTop() >= $(".header").outerHeight()){
 89                     $(".ul_list").addClass("ul_fixed").css({left:oLeft});
 90                     $(".menu_pos").show();
 91                 }else{
 92                     $(".ul_list").removeClass("ul_fixed");
 93                     $(".menu_pos").hide();
 94                 }
 95                 if($(window).scrollTop() >= 150){
 96                     oTop.fadeIn();
 97                     oTop.click(function(){
 98                         //第一種回到頂部的方式
 99                         //$(window).scrollTop(0);
100                         //第二種回到頂部的方式(經常使用)
101                         $("html,body").animate({scrollTop:0});
102                     })
103                 }else{
104                     oTop.fadeOut();
105                 }
106             });
107 
108         })
109     </script>
110 </head>
111 <body>
112     <div class="header">
113         <img src="../images/li02.png" alt="banner圖">
114     </div>
115     <ul class="ul_list">
116         <li><a href="javascript:void(0);">首頁</a></li>
117         <li><a href="javascript:void(0);">新聞動態</a></li>
118         <li><a href="javascript:void(0);">產品展現</a></li>
119         <li><a href="javascript:void(0);">案例分析</a></li>
120         <li><a href="javascript:void(0);">關注咱們</a></li>
121         <li><a href="javascript:void(0);">聯繫咱們</a></li>
122     </ul>
123     <div class="menu_pos"></div>
124     <div class="con">
125         <div class="con_header">網站主內容一</div>
126         <div class="con_center">網站主內容二</div>
127         <div class="con_footer">網站主內容三一</div>
128     </div>
129     <div class="footer"></div>
130     <div class="top">回到頂部</div>
131 </body>
132 </html>
置頂菜單

4、無縫滾動效果圖及代碼以下:

  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:662px;
 10             margin:50px auto;
 11         }
 12         .con button{
 13             width:100px;
 14             height:36px;
 15             line-height: 36px;
 16             text-align: center;
 17             border: none;
 18             margin-left:20px;
 19         }
 20         .box{
 21             width:655px;
 22             height:135px;
 23             margin:20px auto;
 24             border:1px solid #ccc;
 25             padding-left:10px;
 26             padding-bottom:10px;
 27             position: relative;
 28             overflow: hidden;
 29         }
 30         .ul_list{
 31             display: flex;
 32             position: absolute;
 33             left:0;
 34             top:0;
 35             padding: 10px;
 36         }
 37         .ul_list li{
 38             width:120px;
 39             height:120px;
 40             border:1px solid #ccc;
 41             margin-left:-1px;
 42             margin-right:10px;
 43             /*margin-top:10px;*/
 44         }
 45         .ul_list li img{
 46             width:100%;
 47             height:100px;
 48             line-height: 100px;
 49         }
 50     </style>
 51     <script src="../js/jquery-1.12.4.min.js"></script>
 52     <script>
 53         $(function(){
 54             var oUl = $(".ul_list");
 55             var oLeft = $(".left");
 56             var oRight = $(".right");
 57             var left = 0;
 58             var delay = 2;
 59             oUl.html(oUl.html()+oUl.html());
 60             function move(){
 61                 left-=delay;
 62                 if(left<-667){
 63                     left = 0;
 64                 }
 65                 if(left>0){
 66                     left = -667;
 67                 }
 68                 oUl.css({left:left});
 69             }
 70             var timer =setInterval(move,30);
 71             oLeft.click(function(){
 72                 delay =2;
 73             });
 74             oRight.click(function(){
 75                 delay = -2;
 76             });
 77             oUl.children().each(function(){
 78                 oUl.eq($(this).index()).mouseover(function(){
 79                     clearInterval(timer);
 80                 });
 81                 oUl.eq($(this).index()).mouseout(function(){
 82                     timer= setInterval(function(){
 83                         left-=delay;
 84                         if(left<-667){
 85                             left = 0;
 86                         }
 87                         if(left>0){
 88                             left = -667;
 89                         }
 90                         oUl.css({left:left});
 91                     },30);
 92                 })
 93             })
 94         })
 95     </script>
 96 </head>
 97 <body>
 98 <div class="con">
 99     <button class="left">向左</button>
100     <button class="right">向右</button>
101     <div class="box clearfix">
102         <ul class="ul_list">
103             <li><img src="../images/furit_03.jpg" alt="第一張圖片"></li>
104             <li><img src="../images/goods_08.jpg" alt="第二張圖片"></li>
105             <li><img src="../images/furit_02.jpg" alt="第三張圖片"></li>
106             <li><img src="../images/goods_05.jpg" alt="第四張圖片"></li>
107             <li><img src="../images/furit_04.jpg" alt="第五張圖片"></li>
108         </ul>
109     </div>
110 </div>
111 </body>
112 </html>
無縫滾動

5、幻燈片的製做

  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:777px;
 10             height:300px;
 11             margin:150px auto;
 12             position: relative;
 13         }
 14         .ul{
 15             width:777px;
 16             height:300px;
 17             position:relative;
 18             overflow: hidden;
 19         }
 20         .ul li.list{
 21             position:absolute;
 22         }
 23         .ul li img{
 24             width:777px;
 25             height:300px;
 26         }
 27         .ul li:nth-child(1){
 28             left:0;
 29         }
 30         .ul li:nth-child(2){
 31             left:777px;
 32         }
 33         .ul li:nth-child(3){
 34             left:777px;
 35         }
 36         .ul li:nth-child(4){
 37             left:777px;
 38         }
 39         .ul li:nth-child(5){
 40             left:777px;
 41         }
 42         div .prev{
 43             width:40px;
 44             height:40px;
 45             position:absolute;
 46             left:20px;
 47             top:50%;
 48             background:url("../images/banner_icons.png") no-repeat 0 -373px;
 49             cursor: pointer;
 50             z-index: 9000;
 51         }
 52         div .next{
 53             width:40px;
 54             height:40px;
 55             position:absolute;
 56             right:20px;
 57             top:50%;
 58             background:url("../images/banner_icons.png") no-repeat 0 -420px;
 59             cursor: pointer;
 60             z-index: 9000;
 61         }
 62         .points{
 63             width:100%;
 64             height:30px;
 65             position:absolute;
 66             left:0;
 67             bottom:0;
 68             text-align: center;
 69             z-index: 9000;
 70         }
 71         .points li{
 72             width:18px;
 73             height:18px;
 74             border:1px solid #ccc;
 75             border-radius: 50%;
 76             display: inline-block;
 77             margin-left:10px;
 78             cursor: pointer;
 79         }
 80         .points li.active{
 81             background:#ccc;
 82             transition: all 1s ease;
 83         }
 84     </style>
 85     <script src="../js/jquery-1.12.4.min.js"></script>
 86     <script>
 87         $(function(){
 88             var $ul_li = $(".list");
 89             var points = $(".points");
 90             //將要運動過來的li
 91             var nowli = 0;
 92             //將要離開的li;
 93             var prev = $(".active").prevAll().length;
 94             //使用each遍歷全部的li來動態建立li點點列表
 95             $(".ul li").each(function (index) {
 96                var $li = $("<li>");
 97                 if(index == 0){
 98                    $li.addClass("active");
 99                 }
100                 $li.appendTo($(".points"))
101             });
102             var timer =setInterval(autoPlay,4000);
103             $(".ul").hover(function(){
104                 clearInterval(timer);
105             },function(){
106                timer = setInterval(autoPlay,4000);
107             });
108             //點擊點點切換幻燈片
109             points.delegate("li","click",function(){
110                 nowli = $(this).index();
111                 if(nowli == $(".active").prevAll().length){
112                     return false;
113                 }
114                 move($(".active").prevAll().length,nowli);
115                 $(this).addClass("active").siblings().removeClass("active");
116             });
117             function move(prev,nowli){
118                 //獲取當前active所在的位置,與點擊的元素索引號相比,若是小於點擊的索引號,則是往左滑
119                 if(prev<nowli){
120                     //首先把即將要點的li的left值設爲777,animate中的left值設爲0,讓其從右往左滑。
121                     //把即將要離開的li的animate中的left設爲-777,讓其往左滑
122                     $ul_li.eq(nowli).css({left:777}).stop().animate({left:0});
123                     $ul_li.eq(prev).stop().animate({left:-777});
124                 }else{
125                     //首先把即將要點的li的left值設爲-777,animate中的left值設爲0,讓其從左往右滑
126                     //把即將要離開的li的animate中的left值設置777,讓其滑到右邊去
127                     $ul_li.eq(nowli).css({left:-777}).stop().animate({left:0});
128                     $ul_li.eq(prev).stop().animate({left:777});
129                 }
130             }
131             function autoPlay(){
132                 var prev = $(".active").prevAll().length;
133                 points.children().eq(prev+1).addClass("active").siblings().removeClass("active");
134                 //到最後一個時切換效果
135                 if(prev == $(".active").prevAll().length){
136                     points.children().eq(0).addClass("active").siblings().removeClass("active");
137                     $ul_li.eq(0).css({left:777}).stop().animate({left:0});
138                     $ul_li.eq(4).stop().animate({left:-777}).css({left:777});
139                 }else{
140                     move(prev,$(".active").prevAll().length);
141                 }
142             }
143             $(".next").click(function(){
144                 var prev = $(".active").prevAll().length;
145                 points.children().eq(prev+1).addClass("active").siblings().removeClass("active");
146                 //到最後一個時切換效果
147                 if(prev == $(".active").prevAll().length){
148                     points.children().eq(0).addClass("active").siblings().removeClass("active");
149                     $ul_li.eq(0).css({left:777}).stop().animate({left:0});
150                     $ul_li.eq(4).stop().animate({left:-777}).css({left:777});
151                 }else{
152                     move(prev,$(".active").prevAll().length);
153                 }
154             });
155             $(".prev").click(function(){
156                 var prev = $(".active").prevAll().length;
157                 $(".points").children().eq(prev-1).addClass("active").siblings().removeClass("active");
158                 //到第一個時,切換效果改變
159                 if(prev == 0){
160                     points.children().eq(4).addClass("active").siblings().removeClass("active");
161                     $ul_li.eq(0).stop().animate({left:777});
162                     $ul_li.eq(4).css({left:-777}).stop().animate({left:0});
163                 }else{
164                     move(prev,$(".active").prevAll().length);
165                 }
166             });
167         })
168     </script>
169 </head>
170 <body>
171 <div class="con">
172     <ul class="ul">
173         <li class="list">
174             <a href="javascript:void(0);">
175                 <img src="../images/li01.png"  alt="幻燈片圖片01">
176             </a>
177         </li>
178         <li class="list">
179             <a href="javascript:void(0);">
180                 <img src="../images/li02.png" alt="幻燈片圖片02">
181             </a>
182         </li>
183         <li class="list">
184             <a href="javascript:void(0);">
185                 <img src="../images/li03.png" alt="幻燈片圖片03">
186             </a>
187         </li>
188         <li class="list">
189             <a href="javascript:void(0);">
190                 <img src="../images/li04.png"  alt="幻燈片圖片04">
191             </a>
192         </li>
193         <li class="list">
194             <a href="javascript:void(0);">
195                 <img src="../images/li05.png" alt="幻燈片圖片05">
196             </a>
197         </li>
198     </ul>
199     <div>
200         <a class="prev"></a>
201         <a class="next"></a>
202     </div>
203     <ul class="points"></ul>
204 </div>
205 </body>
206 </html>
幻燈片代碼

以上菜單涉及到的知識點以下:

6、jQuery

一、slideDown()向下展現

二、slideUp()向上捲起

三、slideToggle()依次展開或捲起某個元素

 7、jQuery鏈式調用

jquery對象的方法在執行完以後返回這個jquery對象,全部的jQuery對象的方法能夠連起來寫:

$("#div1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")

 $("#div1").//id位div1的元素javascript

.chlidren("ul")  //該元素下的ul子元素css

.slideDown("fast")   //高度從零到實際高度來顯示ul元素html

.parent()   //跳轉到ul的父元素,也就是id爲div1的元素java

.siblings()  //跳轉div1元素同級的全部兄弟元素jquery

.chlidren("ul")   //查找這些兄弟元素中的ul子元素app

.slideUp("fase")   //從實際高度變換爲零來隱藏ul元素ide

相關文章
相關標籤/搜索