//设置定时调用标识
var timer;
/*
* 参数
* obj:要执行的动画
* attr:要执行动画的样式,比如:left top width height
* target:执行动画的目标位置
* speed:移动的速度(正向右边移动,负向左yid)
* callback:回调函数
* -使其变得无限可能
*/
function move (obj,attr,target,speed,callback) {
//关闭点击开始之前的定时调用
clearInterval(obj.timer);
//获取元素目前的位置
var current=parseInt(getStyle(obj,attr));
//判断数度的正负
//从0-800,为正
//从800-0,为负
if(current>target){
speed=-speed;
}
//alert(oldvalue)
obj.timer=setInterval(function(){
//box1原来的left的值
var oldvalue=parseInt(getStyle(obj,attr));
//在旧值上基础上增加
var newValue=oldvalue+speed;
//判断newValue是否大于800,如果没有该语句就会可能不在800那里停住
//向左移动需要判断newValue是否小于target
if ((speed<0&&newValue<target) || (speed>0&&newValue>target)) {
newValue=target;
}
//将新值设置给box1
obj.style[attr]=newValue+"px";
//判断
if (newValue===target) {
clearInterval(obj.timer);
callback&&callback();
}
},30);
}
//查看元素的样式
function getStyle (obj,name) {
if (window.getComputedStyle) {
//支持所有浏览器
return getComputedStyle(obj,null)[name];
}else{
//只支持IE8
return obj.currentStyle[name];
}
}
BOM函数调用
最新推荐文章于 2023-02-10 16:42:07 发布