js 运动框架

/**
* 使用offsetLeft,需注意margin的使用
* offsetLeft = margin-left + left;
* offsetWidth= padding + border + width;
*
* @author Lonve
*/
function getStyle(elem,attr){
var result = null;
result = elem.currentStyle?elem.currentStyle[attr]:getComputedStyle(elem,false)[attr];
if(attr=="opacity"){
return parseInt(parseFloat(result)*100);
}
return parseInt(result);
}

var timer = null;
//匀速运动停止条件--->距离足够近
function offsetMove1(offset){
var oDiv = document.getElementById("oDiv");
var speed = 0;
speed = oDiv.offsetLeft < offset?10:-10;

clearInterval(timer);
timer = setInterval(function(){
if(oDiv.offsetLeft >= offset){ //Math.abs(oDiv.offsetLeft - offset)<speed;
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
},30)
}

//缓动运动条件 1.变化的运动速度,最后速度为零
//问题:offsetLeft
function offsetMove2(elem,offset){
clearInterval(elem.timer);
var speed = 0;
elem.timer = setInterval(function(){
speed = (offset - elem.offsetLeft)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

//是否到达到目标点
if(elem.offsetLeft == offset){
clearInterval(elem.timer);
}else{
elem.style.left = elem.offsetLeft + speed + "px";
}
},30)
}

//任意属性值
//避免小数值    parseInt(0.3*100)
function offsetMove3(elem,attr,offset){
clearInterval(elem.timer);
elem.timer = setInterval(function(){
var curAttr = getStyle(elem,attr);            //当前属性值
var speed = (offset - curAttr)/8;            //当前速度
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(offset == curAttr){
clearInterval(elem.timer);
}else{
if(attr=="opacity"){
elem.style.filter = "alpha(opacity="+(curAttr +speed)+")";
elem.style.opacity= (curAttr + speed)/100;
}else{
elem.style[attr] = (curAttr + speed) + "px";
}
}
},30)
}

//链式运动
function offsetMove4(elem,attr,offset,fn){
clearInterval(elem.timer);
elem.timer = setInterval(function(){
var curAttr = getStyle(elem,attr);
var speed   = (offset - curAttr)/8;
speed = speed > 0? Math.ceil(speed):Math.floor(speed);

if(offset == curAttr){
clearInterval(elem.timer);
if(fn){ fn(); }
}else{
if(attr=="opacity"){
elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")";
elem.style.opacity= (curAttr+speed)/100;
}else{
elem.style[attr] = curAttr + speed + "px";
}
}
},30)
}

//多个属性同时变化
function offsetMove5(elem,json,fn){
var isStop = true;            //所有值都到达
clearInterval(elem.timer);
elem.timer = setInterval(function(){
//历遍json属性
for(var attr in json){
//1.取当前与速度
var offset  = json[attr];
var curAttr = getStyle(elem,attr);
var speed   = (offset - curAttr)/8;
speed = speed > 0? Math.ceil(speed):Math.floor(speed);

//2.检测停止
if(offset!=curAttr){
isStop = false;
}
if(attr=="opacity"){
elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")";
elem.style.opacity= (curAttr+speed)/100;
}else{
elem.style[attr] = curAttr + speed + "px";
}
}
//所有值都到达目标值,则停止
if(isStop){
clearInterval(elem.timer);
if(fn){ fn(); }
}
},30);
}