js实现简单手风琴效果
更新时间:2021年09月26日 09:01:39 作者:段嘉许..!
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Three.js使用OrbitControls后修改相机旋转方向无效解决办法
three.js是用javascript写的基于webGL的第三方3D库,下面这篇文章主要给大家介绍了关于Three.js使用OrbitControls后修改相机旋转方向无效的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01javascript权威指南 学习笔记之javascript数据类型
JavaScript中允许使用三种基本数据类型 数字,文本字符和布尔值。其中数字包括符点数.此外,它还支持两种小数据类型 -null(空)和undefined(未定义),该两种小数据类型,它们各自只定义了一个值 。2011-09-09vue组件中watch props根据v-if动态判断并挂载DOM的问题
这篇文章主要介绍了vue组件中watch props根据v-if动态判断并挂载DOM的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论