| 本文实例为大家分享了js实现手风琴效果的具体代码，供大家参考，具体内容如下 效果： 
实现代码： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } ul,li{ list-style:none; } .box{ width:1200px; height:260px; margin:50px auto 0; overflow: hidden; } .list{ width:2000px; height:260px; } .list>li{ width:200px; height:260px; float:left; background-image:url(images/1.jpg); background-position:center center; background-repeat:no-repeat; } .list>li:nth-child(2){ background-image:url(images/2.jpg); } .list>li:nth-child(3){ background-image:url(images/3.jpg); } .list>li:nth-child(4){ background-image:url(images/4.jpg); } .list>li:nth-child(5){ background-image:url(images/5.jpg); } .list>li:nth-child(6){ background-image:url(images/6.jpg); } </style> </head> <body> <div class="box"> <ul class="list"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="js/startmove.js"></script> <script> var oLis = document.getElementsByClassName("list")[0].children; for(var i = 0; i < oLis.length; i++){ oLis[i].onmouseover = function(){ for(var j = 0; j < oLis.length; j++){ startMove(oLis[j],{ width:160 },50) } startMove(this,{ width:400 },50) } oLis[i].onmouseout = function(){ for(var j = 0; j < oLis.length; j++){ startMove(oLis[j],{ width:200 },10) } } } </script> </body></html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
详细聊聊Vue生命周期的那些事
vue-Router安装过程及原理详细 |
