JS中图片抖动有关问题
JS中图片抖动问题
<!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));获取了当前图片的位置才使得图片移位的 可是想不出怎么保留开始时候图片的位置
------解决思路----------------------
试了一下。楼主这个的问题可能在于一个shake还没执行完，就去执行下一个shake。
所以一次结束之后再移动上去是可以的。 但是如果第一次函数还没运行完。 就运行第二次shake。
那么第二次shake获取到的初始值，就是第一次shake到某一位置的时候的值。
所以第一次shake结束之后，第二次shake还在运行，‘
而第二次shake运行结束回到的起点。 就是它shake的初始值,并不是原始值。
所以我们可以换一个思路，一次没执行完不执行第二次。
引入一个变量 shaking。来记录是不是正在抖动。
这样解决不知能否满足楼主？
------解决思路----------------------
主要是你计时器的问题，如果把计时器设为内置对象的话，就会单个执行互不干扰。那样的话，鼠标每进去一次就会有个新的坐标生成所以图片位置就会改变，解决方法就是把计时器改成统一的
这样就不会改变了
------解决思路----------------------
应该是计时器里
<!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));获取了当前图片的位置才使得图片移位的 可是想不出怎么保留开始时候图片的位置
------解决思路----------------------
试了一下。楼主这个的问题可能在于一个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');
}
}
这样解决不知能否满足楼主？
------解决思路----------------------
主要是你计时器的问题，如果把计时器设为内置对象的话，就会单个执行互不干扰。那样的话，鼠标每进去一次就会有个新的坐标生成所以图片位置就会改变，解决方法就是把计时器改成统一的
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)
这样就不会改变了
------解决思路----------------------
应该是计时器里