JavaScript 动画之链式运动

来源：互联网发布：淘宝定制家具付款流程编辑：程序博客网时间：2024/05/21 11:18

回调函数
运动停止时，执行函数
运动停止时，开始下一次运动
这里写图片描述

function getStyle(obj, attr){    if(obj.currentStyle)    {        return obj.currentStyle[attr];    }    else    {        return getComputedStyle(obj, false)[attr];    }}function startMove(obj, attr, iTarget, fn){    clearInterval(obj.timer);    obj.timer=setInterval(function (){        //1.ȡ��ǰ��ֵ        var iCur=0;        if(attr=='opacity')        {            iCur=parseInt(parseFloat(getStyle(obj, attr))*100);        }        else        {            iCur=parseInt(getStyle(obj, attr));        }        //2.���ٶ�        var iSpeed=(iTarget-iCur)/8;        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);        //3.���ֹͣ        if(iCur==iTarget)        {            clearInterval(obj.timer);            if(fn)            {                fn();            }        }        else        {            if(attr=='opacity')            {                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';                obj.style.opacity=(iCur+iSpeed)/100;            }            else            {                obj.style[attr]=iCur+iSpeed+'px';            }        }    }, 30)}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style>#div1 {width:100px; height:100px; background:red; filter:alpha(opacity:30); opacity:0.3;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="move.js"></script><script>window.onload=function (){    var oDiv=document.getElementById('div1');    oDiv.onmouseover=function ()    {        startMove(oDiv, 'width', 300, function (){            startMove(oDiv, 'height', 300, function (){                startMove(oDiv, 'opacity', 100);            });        });    };    oDiv.onmouseout=function ()    {        startMove(oDiv, 'opacity', 30, function (){            startMove(oDiv, 'height', 100, function (){                startMove(oDiv, 'width', 100);            });        });    };};</script></head><body><div id="div1"></div></body></html>

参考：JavaScript动画

阅读全文

0 0