87,991
社区成员
发帖
与我相关
我的任务
分享点击图片，抖动的问题。
不断地点击图片后，图片会慢慢的发生位移，虽然最后还是回到原来的位置，但在点击的时候，还是在移动。这个应该怎么解决？ 而且每次点击，图片抖动的速度都在加快。。。 我也设置了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;
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>
...全文
请发表友善的回复…
发表回复
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>
