脚本宝典收集整理的这篇文章主要介绍了js实现简单手风琴效果,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的js实现简单手风琴效果全部内容,希望文章能够帮你解决js实现简单手风琴效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。