您的位置：首页 > 其它

图片抖动

2016-03-04 19:22 387 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
width: 150px;
height: 150px;
float: left;
margin-left: 30px;
position: absolute;
top: 100px;
}
</style>
<script>
window.onload = function(){
function getStyle(obj,name){
return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
}
var aImg = document.getElementsByTagName('img');
var arr=[];
//toMove
function toMove(obj,valueL){
var timer = null;
var dir=true;
var data=20;

clearInterval(timer);
timer = setInterval(function(){
dir=!dir;
if(dir){
obj.style.left=valueL-data+'px';
//console.log(obj.style.left);
data-=2;
}else{
obj.style.left=valueL+data+'px';
//console.log(obj.style.left);
}
//console.log(obj.style.left);
if(data<0){
clearInterval(timer);
}
},50);
}
//初始值
for(var i=0;i<aImg.length;i++){
aImg[i].style.left=30+i*180+'px';
aImg[i].index=i;
arr.push(parseInt(getStyle(aImg[i],'left')));
aImg[i].onmouseover = function(){

toMove(this,arr[this.index]);
};
}
};
</script>
</head>
<body>
<img src="img/0.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</body>
</html>




抖动是利用了定时器，在左右来回变化实现，所以，定时器每次工作，都要先在一边，下一次在另一边，这样就能实现左右摆动，时间不能太慢，不然效果不好，还有就是为了防止每次移入时的干扰，要在函数外面只调用一次位置。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航