点击图片，抖动的问题。

Rni-L 2015-10-24 01:06:39

不断地点击图片后，图片会慢慢的发生位移，虽然最后还是回到原来的位置，但在点击的时候，还是在移动。这个应该怎么解决？而且每次点击，图片抖动的速度都在加快。。。我也设置了clearInterva，但为什么还会这样？

这是代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
img{
position:absolute; width:180px；top:200px; left:300px; margin:0px;
}

</style>
<script>
window.onload = function (){
var oimg = document.getElementById('img1');
var fff = oimg.offsetLeft;

oimg.onclick = function(){
shake();
}
function shake(){
var num=0;
var time = null;
var arr = [];
var por = oimg.offsetLeft;
oimg.style.left = parseInt(fff) +'px';

clearInterval(time);

for(var i=100;i>0;i-=2){
arr.push(i,-i);
}arr.push(0);

time = setInterval (function (){
oimg.style.left = por +arr[num]+'px';
num++;
if(num === arr.length){
clearInterval(time);
oimg.style.left = parseInt(fff)+'px';
}
},30);
}
}
</script>
</head>
<body>
<img src="4.jpg" id="img1"/>
</body>
</html>

...全文

122 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

liusaint1992 2015-10-24

打赏
举报


<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
img{
position:absolute; width:180px；top:200px; left:300px; margin:0px;
}

</style>
<script>
window.onload = function (){
var oimg = document.getElementById('img1');
var fff = oimg.offsetLeft;
var time = null;
oimg.onclick = function(){
shake();
}
function shake(){
var num=0;
var arr = [];  


clearInterval(time);
oimg.style.left = parseInt(fff) +'px';
var por = oimg.offsetLeft;


for(var i=100;i>0;i-=2){
        arr.push(i,-i);
}arr.push(0);

time = setInterval (function (){
         oimg.style.left = por +arr[num]+'px';
         num++;
         if(num === arr.length){
         	clearInterval(time);
         	oimg.style.left = parseInt(fff)+'px';
         }
},30);
}
}
</script>
</head>
<body>
<img src="http://avatar.csdn.net/6/B/9/1_yiiouo.jpg" id="img1"/>
</body>
</html>

1.var time。定义在外面。 2.clearInterval(time); oimg.style.left = parseInt(fff) +'px'; var por = oimg.offsetLeft; 这几句的执行顺序交换一下。不然你第二次shake的起点并不是图片原始位置。实现的效果是当第一次shake运行没结束的时候点击图片。立马结束第一次shake并回到初始位置开始第二次shake()。你也可以考虑第一次没shake()结束就不允许shake()第二次。看你自己的需求。参见这个帖子： http://bbs.csdn.net/topics/391843990