JS中图片抖动问题

qq_30302803 2015-10-16 07:10:32

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width:150px;
height:150px;
position:absolute;
top:50px;
left:300px;
}
</style>
<script>
window.onload = function(){
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
function shake(obj,attr,endFn){
var arr = [];
for(var i=20;i>0;i-=2){
arr.push(i,-i);
}
arr.push(0);
var num = 0;
var origin = parseInt(getStyle(obj,attr));
obj.shake = setInterval(function(){
obj.style[attr] = origin + arr[num] + 'px';
num++;
if(num == arr.length){
clearInterval(obj.shake);
endFn && endFn();
}
},50)
}
var img = document.getElementsByTagName("img")[0];
img.onmouseover = function(){
shake(this,'top');
}
}
</script>
</head>
<body>
<img src="img/1.jpg">
</body>
</html>
图片会上下抖动可是只要鼠标连续不断的快速移入移出图片的最终位置就会改变我知道这是每次调用shake这个函数的时候
var = origin = parseInt(getStyle(obj,attr));获取了当前图片的位置才使得图片移位的可是想不出怎么保留开始时候图片的位置

...全文

458 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

warmersen 2016-04-29

打赏
举报

还有需要注意的是，不用同嵌套两个setinterval

qq_30302803 2015-10-18

打赏
举报

至尊宝大兄弟给我的回答太他妈有用了谢谢另外谢谢帮我解决问题的其他几个大兄弟（虽然没看懂你们在说什么）但好歹有人的捧个人场

NEOS55555 2015-10-17

打赏
举报

对了 var origin = parseInt(getStyle(obj,attr)); 这句要放到循环里。。。。

NEOS55555 2015-10-17

打赏
举报

应该是计时器里

NEOS55555 2015-10-17

打赏
举报

主要是你计时器的问题，如果把计时器设为内置对象的话，就会单个执行互不干扰。那样的话，鼠标每进去一次就会有个新的坐标生成所以图片位置就会改变，解决方法就是把计时器改成统一的


var origin = parseInt(getStyle(obj,attr));
	var shake = setInterval(function(){
		obj.style[attr] = origin + arr[num] + 'px';
		num++;
		if(num == arr.length){
			clearInterval(shake);
			endFn && endFn();
		}
	},50)

这样就不会改变了

liusaint1992 2015-10-16

打赏
举报

试了一下。楼主这个的问题可能在于一个shake还没执行完，就去执行下一个shake。所以一次结束之后再移动上去是可以的。但是如果第一次函数还没运行完。就运行第二次shake。那么第二次shake获取到的初始值，就是第一次shake到某一位置的时候的值。所以第一次shake结束之后，第二次shake还在运行，‘ 而第二次shake运行结束回到的起点。就是它shake的初始值,并不是原始值。所以我们可以换一个思路，一次没执行完不执行第二次。引入一个变量 shaking。来记录是不是正在抖动。


		window.onload = function(){
			function getStyle(obj,attr){
				return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
			}
			var shaking = false;
			function shake(obj,attr,endFn){
				if(shaking == true){
					return;
				}
				shaking = true;
				var arr = [];
				for(var i=20;i>0;i-=2){
					arr.push(i,-i);
				}
				arr.push(0);
				var num = 0;
				var origin = parseInt(getStyle(obj,attr));
				obj.shake = setInterval(function(){
					obj.style[attr] = origin + arr[num] + 'px';
					num++;
					if(num == arr.length){
						clearInterval(obj.shake);
						endFn && endFn();
						shaking = false;
					}
				},50)

			}
			var img = document.getElementsByTagName("img")[0];
			img.onmouseover = function(){
				shake(this,'top');
			}
		}

这样解决不知能否满足楼主？