代码如下:
代码如下:
var timer=null;
window.Onload=function(){
var op=document.getElementById('d1');
var obtn=document.getElementById('btn');
clearInterval(timer); //作用见要点①
obtn.Onclick=function(){
timer=setInterval(function(){
var speed=10;
if(op.offsetLeft>=300){ //判断对象边距 到达指定位移则关闭定时器
clearInterval(timer);
}else{
op.style.left=op.offsetLeft+speed+'px';
}
},30);
}
}
封装:
代码如下:
//object:要移动的对象id itarget:水平位移位置
var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(obj.offsetLeft
}else{
speed=-10;
}
if(obj.offsetLeft==itarget){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+'px';
};
},30);
}
JS:
代码如下:
var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(obj.offsetLeft
}else{
speed=-(obj.offsetLeft-itarget)/10;
}
speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整,解决最后不足1px的位移量被忽略的问题
if(obj.offsetLeft==itarget){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+'px';
};
document.title=obj.offsetLeft;
},30);
}
扩展:垂直位移的原理和水平位移的相同。
补充1:
解决speed与itarget不能整除,导致对象不能精确到达itarget位置,而是在其左右抖动问题:
代码如下:
var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(obj.offsetLeft<=itarget){
speed=7;
}else{
speed=-7;
}
//设置对象在离目标位置itarget的距离小于speed时,停止运动,同时设置对象的left直接移动到itarget的位置。
if(Math.abs(itarget-obj.offsetLeft<=speed)){
clearInterval(timer);
obj.style.left=itarget+'px';
}else{
obj.style.left=obj.offsetLeft+speed+'px';
};
document.title=obj.offsetLeft;
},30);
}
offset的Bug:例如offsetWidth,它包含的不只是width,还包含padding和border。当给对象设置了填充或边框时,再将offsetWidth赋值给对象时,就会运动就会有差异。
解决:不用offset,而是通过创建一个兼容IE和FF的函数,获取元素的width属性值,来代替offsetWidth。该函数如下:getAttr()
代码如下:
function getAttr(obj,attrName){
var obj=document.getElementById(obj);
if(obj.currentStyle){
return obj.currentStyle[attrName]; //兼容IE
}else{
return getComputedStyle(obj,false)[attrName]; //兼容FF
}
}