手风琴特效效果
Posted 尘暮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手风琴特效效果相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>手风琴demo</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta name="description" content="Fengqin_Demo"> 8 <script type="text/javascript" src=‘http://libs.baidu.com/jquery/2.0.0/jquery.js‘></script> 9 <style> 10 *{ 11 margin: 0; 12 padding:0; 13 -webkit-box-sizing:border-box; 14 -moz-box-sizing:border-box; 15 box-sizing:border-box; 16 } 17 body{ 18 background: #191970; 19 font-family: ‘Open Sans‘, Arial, Helvetica, Sans-serif, Verdana, Tahoma;; 20 } 21 ul{ 22 list-style: none; 23 } 24 a{ 25 color:#FF4500; 26 text-decoration: none; 27 } 28 29 30 .container{ 31 width:100%; 32 max-width: 300px; 33 margin: 20px auto 30px; 34 border-radius: 4px; 35 -webkit-border-radius: 4px; 36 -moz-border-radius: 4px; 37 background: #fff; 38 } 39 .container .link{ 40 cursor: pointer; 41 color: #292421; 42 padding: 15px 15px 15px 50px; 43 font-size:14px; 44 font-weight: 700; 45 border-bottom: 1px solid #ccc; 46 -webkit-transition: all 0.4s ease; 47 -o-transition: all 0.4s ease; 48 transition: all 0.4s ease; 49 } 50 .container li.open .link{ 51 color:#ED9121; 52 } 53 .container li:last-child .link{ 54 border-bottom: 0; 55 } 56 57 58 .desc{ 59 background: #3D59AB; 60 font-size: 14px; 61 display: none; 62 } 63 .desc li{ 64 border-bottom: 1px solid #ccc; 65 } 66 .desc li:last-child{ 67 border-bottom: 0; 68 } 69 .desc a{ 70 display: block; 71 padding:12px; 72 padding-left: 50px; 73 color: #808A87; 74 -webkit-transition: all 0.25s ease; 75 -o-transition: all 0.25s ease; 76 transition: all 0.25s ease; 77 78 } 79 .desc a:hover{ 80 background: #1E90FF; 81 color: #fff; 82 } 83 </style> 84 </head> 85 <body> 86 <ul class = "container"> 87 <li> 88 <div class = "link">Html</div> 89 <ul class = "desc"> 90 <li><a href="#">Html</a></li> 91 <li><a href="#">Css</a></li> 92 </ul> 93 </li> 94 <li> 95 <div class = "link">Javascript</div> 96 <ul class = "desc"> 97 <li><a href="#">Javascript</a></li> 98 <li><a href="#">JQuery</a></li> 99 <li><a href="#">Zepto</a></li> 100 <li><a href="#">Require</a></li> 101 </ul> 102 </li> 103 <li> 104 <div class = "link">Browser</div> 105 <ul class = "desc"> 106 <li><a href="#">Firefox</a></li> 107 <li><a href="#">Chrome</a></li> 108 <li><a href="#">Safari</a></li> 109 </ul> 110 </li> 111 <li> 112 <div class = "link">Author</div> 113 <ul class = "desc"> 114 <li><a href="#">Walk Monkey</a></li> 115 <li><a href="#">Marlboro</a></li> 116 </ul> 117 </li> 118 </ul> 119 120 </body> 121 <script> 122 $(document).ready(function(){ 123 124 $(‘.container li‘).click(function(){ 125 $(this).children(".desc").slideToggle(); 126 }) 127 128 /* $(‘.link:eq(0)‘).click(function(){ 129 var index=$(‘.desc:eq(0)‘); 130 index.slideToggle(); 131 }) 132 $(‘.link:eq(1)‘).click(function(){ 133 var index=$(‘.desc:eq(1)‘); 134 index.slideToggle(); 135 }) 136 $(‘.link:eq(2)‘).click(function(){ 137 var index=$(‘.desc:eq(2)‘); 138 index.slideToggle(); 139 }) 140 $(‘.link:eq(3)‘).click(function(){ 141 var index=$(‘.desc:eq(3)‘); 142 index.slideToggle(); 143 }) */ 144 145 }) 146 147 148 149 150 151 152 153 154 155 </script> 156 157 </html>
焦点图轮播
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>焦点图轮播特效</title> 6 <meta charset="utf-8"> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 body { 14 } 15 a{ 16 outline: none; 17 hidefocus:true; 18 } 19 20 .wrap { 21 margin: 0 auto; 22 width: 696px; 23 margin-bottom: 50px; 24 position: relative; 25 } 26 27 .wrap {} 28 29 .wrap_pic { 30 width: 696px; 31 height: 400px; 32 overflow: hidden; 33 /*position: relative;*/ 34 } 35 36 .wrap_pic div { 37 width: 100%; 38 height: 400px; 39 } 40 41 .wrap_pic div { 42 position: absolute; 43 } 44 45 .wrap_pic img { 46 width: 100%; 47 height: 100%; 48 } 49 50 .wrap ul { 51 list-style: none; 52 } 53 54 .wrap ul li { 55 width: 80px; 56 height: 40px; 57 background-color: #ddd; 58 text-align: center; 59 line-height: 30px; 60 opacity: .3; 61 filter: alpha(opacity=30); 62 zoom:1; 63 /*margin-right: 10px;*/ 64 } 65 66 /*.wrap ul li { 67 display: inline-block; 68 }*/ 69 #wrap_ul li{ 70 float: left; 71 margin-right: 8px; 72 } 73 #wrap_ul li:last-child{ 74 margin-right: 0px; 75 } 76 .wrap ul li img { 77 width: 100%; 78 height: 100%; 79 } 80 81 .next, 82 .pre { 83 position: absolute; 84 top: 160px; 85 z-index: 1; 86 width: 80px; 87 height: 80px; 88 text-align: center; 89 line-height: 80px; 90 cursor: pointer; 91 } 92 93 .next p, 94 .pre p { 95 font-size: 40px; 96 font-weight: bold; 97 } 98 99 .pre { 100 left: 0px; 101 } 102 103 .next { 104 right: 0px; 105 } 106 107 108 .jq_wrap { 109 margin: 0 auto; 110 width: 696px; 111 margin-bottom: 50px; 112 position: relative; 113 } 114 .big_wrap{ 115 width: 696px; 116 height: 400px; 117 overflow: hidden; 118 position: relative; 119 } 120 .slide_pic { 121 height: 400px; 122 width: 6264px; 123 position: absolute; 124 125 } 126 127 128 129 .slide_pic li { 130 width: 696px; 131 height: 400px; 132 list-style:none; 133 overflow: hidden; 134 position: relative; 135 left: 0px; 136 float: left; 137 } 138 .slide_item li:last-child, 139 .slide_pic li:last-child{ 140 margin-right: 0px; 141 } 142 .slide_pic li img, 143 .slide_item li img{ 144 width: 100%; 145 height: 100%; 146 } 147 148 .slide_item li { 149 width: 80px; 150 height: 40px; 151 overflow: hidden; 152 background-color: #ddd; 153 text-align: center; 154 line-height: 30px; 155 opacity: .3; 156 filter: alpha(opacity=30); 157 zoom:1; 158 float: left; 159 margin-right: 8px; 160 } 161 162 </style> 163 </head> 164 165 <body> 166 <div class="jq_wrap"> 167 <div class="big_wrap"> 168 <ul id="slide_pic" class="slide_pic"> 169 <li><img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"></li> 170 <li><img src="http://pic25.nipic.com/20121112/10810261_134603501000_2.jpg"></li> 171 <li><img src="http://image37.360doc.com/DownloadImg/2011/09/2500/18000218_41.jpg"></li> 172 <li><img src="http://www.xmnn.cn/pic/pktp/201112/W020111227547869935351.jpg"></li> 173 <li><img src="http://pic25.nipic.com/20121112/10810261_134603501000_2.jpg"></li> 174 <li><img src="http://pic27.nipic.com/20130219/10840239_143710447100_2.jpg"></li> 175 <li><img src="http://4493bz.1985t.com/uploads/allimg/150126/4-150126153144.jpg"></li> 176 <li><img src="http://picture.youth.cn/xwjx/201112/W020111230498507247126.jpg"></li> 177 </ul> 178 </div> 179 <div class="pre" id="preBtn"> 180 <p><</p> 181 </div> 182 <div class="next" id="nextBtn"> 183 <p>></p> 184 </div> 185 <ul id="slide_item" class="slide_item"> 186 <li><img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"></li> 187 <li><img src="http://pic25.nipic.com/20121112/10810261_134603501000_2.jpg"></li> 188 <li><img src="http://image37.360doc.com/DownloadImg/2011/09/2500/18000218_41.jpg"></li> 189 <li><img src="http://www.xmnn.cn/pic/pktp/201112/W020111227547869935351.jpg"></li> 190 <li><img src="http://pic25.nipic.com/20121112/10810261_134603501000_2.jpg"></li> 191 <li><img src="http://pic27.nipic.com/20130219/10840239_143710447100_2.jpg"></li> 192 <li><img src="http://4493bz.1985t.com/uploads/allimg/150126/4-150126153144.jpg"></li> 193 <li><img src="http://picture.youth.cn/xwjx/201112/W020111230498507247126.jpg"></li> 194 </ul> 195 </div> 196 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 197 </script> 198 <script> 199 (function($) { 200 // slidePic:为大图片的外层ul 201 // slideItem:底部小图片的外层ul 202 // preBtn,nextBtn分别为向前向后按钮 203 var slidePictures = function(slidePic, slideItem, preBtn, nextBtn) { 204 var self = this; 205 this.slidePic = $("#" + slidePic); //内容区域大图片的外层ul 206 this.slideItem = $("#" + slideItem); //底部小图片的外层ul 207 this.slidePic_li = $("#" + slidePic + " li"); //内容区域大图片 208 this.slideItem_li = $("#" + slideItem + " li"); //底部小图片 209 this.prevBtn = $("#" + preBtn); //前进按钮 210 this.nextBtn = $("#" + nextBtn); //后退按钮 211 this.length = this.slidePic_li.length; //ul中图片的个数，因为大图和小图是一一对应的，所以个数相同 212 this.speed = 500; //speed为图片滑动速度，数值越大速度越慢 213 this.index = 0; //第一次显示的是第一张图片，所以索引为0；表明当前正在显示的图片索引 214 this.timer; //定义一个定时器参数 215 // 初始化各项参数和属性 216 self.init(); 217 // 首先克隆一份第一张图片,并将其添加到外层ul中 218 var clone = this.slidePic_li.first().clone(); 219 this.slidePic.append(clone); 220 // 这里需要重新获取一下li,因为之前的this.slidePic_li保存的是克隆前的数据 221 this.length = $("#slide_pic li").length; 222 223 this.prevBtn.click(function() { 224 self.moveByClick(1); 225 }); 226 this.nextBtn.click(function() { 227 self.moveByClick(-1); 228 }); 229 } 230 slidePictures.prototype = { 231 // 初始化函数，当页面刚加载完给页面一些默认的样式，或者执行相关函数 232 init: function() { 233 // 首先给外层ul一个left属性为0； 234 this.slidePic.css("left", 0); 235 // 获取每一个图片的宽度 236 this.width = this.slidePic_li.width(); 237 // 将第一个小图片透明度默认设为1 238 this.slideItem_li.first().css("opacity", "1"); 239 // 给每一个小图片添加一个id属性，用于标识 240 this.giveItemAttrId(); 241 this.autoChange(); 242 this.cancleTimer(); 243 this.mouseoverShowBigPic(); 244 }, 245 // 突出显示底部小图片，用于标识当前大图位置，id为0即显示第一个 246 showItem: function(id) { 247 // 判断id值 248 var item = id; 249 if (item == this.length - 1) { 250 item = 0; 251 } 252 // 将所有的小图片透明度设为.3 253 this.slideItem_li.css("opacity", ".3"); 254 // 将当前id的小图片透明度设为1 255 this.slideItem_li.eq(item).css("opacity", "1"); 256 }, 257 // 得到当前透明度为needOpc的图片序号 258 getCurrentShowPic: function(needOpc) { 259 var item = 0; 260 this.slideItem_li.each(function(index, el) { 261 var opc = $(this).css("opacity"); 262 if (opc == needOpc) { 263 item = index; 264 } 265 }); 266 return item; 267 }, 268 mouseoverShowBigPic: function() { 269 var self = this; 270 this.slideItem_li.on(‘mouseover‘, function() { 271 var id = $(this).attr("id"); 272 self.showNow(id); //显示大图片 273 self.showItem(id); //显示对应小图片 274 }) 275 }, 276 // 鼠标划过小图片时显示对应的大图 277 showNow: function(id) { 278 279 // 找到当前显示的图片的序号，item为当前序号 280 var item = this.getCurrentShowPic(); 281 // 计算需要移动的距离 282 var needMove = id * this.width; 283 // 如果当前显示的图片在鼠标划过的图片的左方，则向左滑动，否则向右滑动 284 if (id > item) { 285 this.slidePic.stop().animate({ 286 left: "-" + needMove + "px" 287 }, this.speed); 288 } else { 289 this.slidePic.stop().animate({ 290 left: "-" + needMove + "px" 291 }, this.speed); 292 } 293 // 更新this.index; 294 this.index = id; 295 }, 296 // 每次鼠标点击左右按钮时滑动一张图片 297 moveByClick: function(flag) { 298 var self = this; 299 //如果没有传入参数则默认为1； 300 var flag = flag||-1; 301 // flag用于标记点击的是左键还是右键,flag > 0为左键，反之为右键 302 // length为图片的个数 303 var length = this.length; 304 var width = this.width; 305 var speed = this.speed; 306 // 当点击的是左键时 307 if (flag > 0) { 308 this.index--; 309 if (this.index == -1) { 310 this.slidePic.css("left", "-" + (length - 1) * width + "px"); 311 // 突出显示对应的底部小图片 312 this.index = length - 2; 313 } 314 this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed); 315 this.showItem(this.index); 316 317 } else { //点击右键时 318 this.index++; 319 /*当index为最后一张图片时，先将外层ul的left值设为0 320 此时最后一张图片为后来克隆添加上的，将left值改为0后实际上显示的是第一张图片了 321 但是由于最后一张和第一张相同，人眼看不出差别，所以以为还没有改变 322 然后再将index设为1，让其切换到下一张图片，从而实现无缝轮播 323 点击左键时原理相同 324 */ 325 if(this.index == length-1){ 326 this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed,function(){ 327 self.slidePic.css("left", "0px"); 328 }); 329 this.showItem(this.index); 330 331 }else if(this.index == length){ 332 this.index = 1; 333 this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed); 334 this.showItem(this.index); 335 }else{ 336 this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed); 337 this.showItem(this.index); 338 } 339 } 340 }, 341 // 将所有的小图片透明度设为需要的值 342 hideAllitem: function(opc) { 343 this.slideItem_li.each(function(index, el) { 344 $(this).css("opacity", opc); 345 }); 346 }, 347 348 // 自动切换 349 autoChange: function() { 350 var self = this; 351 this.timer = setInterval(function() { 352 self.moveByClick(); 353 }, 1500); 354 }, 355 //当鼠标划过相关区域时，停止自动播放 356 cancleTimer: function() { 357 var self = this; 358 $(".jq_wrap").on("mouseover", function() { 359 clearInterval(self.timer); 360 }); 361 $(".jq_wrap").on("mouseout", function() { 362 self.autoChange(); 363 }) 364 }, 365 // 给底部小图片一个id属性，用于标识 366 giveItemAttrId: function() { 367 var self = this; 368 this.slideItem_li.each(function(index, el) { 369 $(this).attr("id", index); 370 }); 371 } 372 }; 373 window["slidePictures"] = slidePictures; 374 })(jQuery); 375 </script> 376 <script> 377 var slidePictures = new slidePictures("slide_pic", "slide_item", "preBtn", "nextBtn"); 378 </script> 379 380 </body> 381 382 </html>
以上是关于手风琴特效效果的主要内容，如果未能解决你的问题，请参考以下文章