就是单独移动每个li时

当前位置: mg游戏平台下载 > mg4355线路检测手机版 >

本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下

一、纯css+html的手风琴效果

这种用css写的手风琴比较简单,主要是应用到css中的,transition属性。

body{background: url repeat;}ul,li,p{margin: 0px;padding: 0px;list-style: none;} #div{width: 1180px;height: 405px;border:5px solid #ccc;padding: 0px;margin: 0px auto;overflow: hidden;} .list{width: 3200px;} .list li{float: left;width: 170px;height: 500px;;position: relative; -moz-transition:width 2s; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }.list:hover li{width: 107px;}.list li:hover{width: 538px;}.list li p{width: 100%;height: 100%;opacity: 0.5;position: absolute;top: 0px;left: 0px;background: black; }.list li:hover p{opacity:0}          

二、纯js+html制作手风琴

这个手风琴出现一个问题,就是单独移动每个li时,没问题,但是当移动很快时,最右边的li出现空隙。我感觉是定时器的问题,就是当每个li还没回到自己的位置时,下一个li就开始运动了。但我定时器已经关了啊。

麻烦哪位给我留言,帮我看看怎么改哈!

手风琴效果window.onload=function(){ var oDiv=document.getElementById; var iMinWidth=9999999; var aLi=oDiv.getElementsByTagName; var aSpan=oDiv.getElementsByTagName; var i=0; var bool=false; for { aSpan[i].index=i; aSpan[i].onmouseover=function () { for { startMove(aLi[i],{width:this.offsetWidth});//调用运动函数 bool=true; } if { startMove(aLi[this.index],{width:552}); } } }};   这是第一个    这是第二个    这是第三个    这是第四个    这是第五个    这是第六个   

perfectMove2.js代码如下:

function getStyle//用此种方法获取样式中的属性{ if { return obj.currentStyle[attr]; } else { return getComputedStyle[attr]; }}function startMove{ clearInterval;//清除定时器 obj.timer=setInterval { var stop=true; for { var iCur=0; if { iCur=parseInt(parseFloat*100);//这里加parseInt是避免div的数值不稳定,在波动 } else { iCur=parseInt; } var iSpeed=/8; iSpeed=iSpeed>0?Math.ceil:Math.floor; if { stop=false; } if { obj.style.filter='alpha(opacity:'+'; obj.style.opacity=/100; } else { obj.style[attr]=iCur+iSpeed+'px'; } } if { clearInterval{fn }

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

上一篇:这样就可以直接在父组件中操作自己 下一篇:AngualrJS会自动调用$scope.$watch函数