点击图片，抖动的有关问题

点击图片，抖动的问题。
不断地点击图片后，图片会慢慢的发生位移，虽然最后还是回到原来的位置，但在点击的时候，还是在移动。这个应该怎么解决？而且每次点击，图片抖动的速度都在加快。。。我也设置了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>
------解决思路----------------------



<!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.****.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.****.net/topics/391843990

点击图片，抖动的有关问题

相关推荐