运动框架的实现思路
运动,其实就是在一段时间内改变top、bottom、left、right、width、height、opacity的值,到达目的地之后停止。
运动框架的实现代码:
function getStyle(element, attr) {
//IE写法
if (element.currentStyle) {
return element.currentStyle[attr];
} else {
//标准
return getComputedStyle(element, false)[attr];
}
}
function startMove(element, json, time,func) {
var flag = true; //假设所有运动到达终点.
clearInterval(element.timer);
element.timer = setInterval(function () {
for (var attr in json) {
//1.取当前的属性值。
var iCurrent = 0;
if (attr === "opacity") { //为透明度时执行。
iCurrent = Math.round(parseFloat(getStyle(element, attr)) * 100);
} else { //默认情况
iCurrent = parseInt(getStyle(element, attr)); //实际样式大小
}
//2.算运动速度,动画缓冲效果
var iSpeed = (json[attr] - iCurrent) / 10; //(目标值-当前值)/缩放系数=速度
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整
//3.未到达目标值时,执行代码
if (iCurrent != json[attr]) {
flag = false; //终止条件
if (attr === "opacity") { //为透明度时,执行
element.style.filter = "alpha(opacity:" + (iCurrent + iSpeed) + ")"; //IE
element.style.opacity = (iCurrent + iSpeed) / 100; //标准
} else { //默认
element.style[attr] = iCurrent + iSpeed + "px";
}
}
//4. 运动终止,是否回调
if (flag) {
clearInterval(element.timer);
if (func) {
func();
}
}
}
}, time);
}
运动框架的各个接口:
element:需要执行运动的对象
json:执行什么运动,如{"width":"100"}就是宽度变为100的运动,如做多个同时运动,请在括号内用 , 隔开
time:定时器,执行动画持续的时间
func:回调函数,可执行链式运动
使用jQuery可以很轻松的实现:
如
<pre name="code" class="html">$(function(){
$("执行运动动画的对象").mouseenter(function(){
$(this).animate({"top":"-25px","opacity":"0"},300,function(){//上移25像素,透明度变为0
$(this).animate({"top":"20px","opacity":"1"},200);//之后下移20像素,透明度变为1
})
})
});