JavaScript 动画之鼠标放大div

来源：互联网发布：天猫淘宝商城女装冬装编辑：程序博客网时间：2024/06/05 07:14

这里写图片描述

function getStyle(obj, attr){    if(obj.currentStyle)    {        return obj.currentStyle[attr];    }    else    {        return getComputedStyle(obj, false)[attr];    }}function startMove(obj, json, fn){    clearInterval(obj.timer);    obj.timer=setInterval(function (){        var bStop=true;     //��һ���˶��ͽ����ˡ������е�ֵ��������        for(var attr in json)        {            //1.ȡ��ǰ��ֵ            var iCur=0;            if(attr=='opacity')            {                iCur=parseInt(parseFloat(getStyle(obj, attr))*100);            }            else            {                iCur=parseInt(getStyle(obj, attr));            }            //2.���ٶ�            var iSpeed=(json[attr]-iCur)/8;            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);            //3.���ֹͣ            if(iCur!=json[attr])            {                bStop=false;            }            if(attr=='opacity')            {                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';                obj.style.opacity=(iCur+iSpeed)/100;            }            else            {                obj.style[attr]=iCur+iSpeed+'px';            }        }        if(bStop)        {            clearInterval(obj.timer);            if(fn)            {                fn();            }        }    }, 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:#CCC; position:absolute; left:200px; top:200px; margin:0;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="move2.js"></script><script>window.onload=function (){    var oDiv=document.getElementById('div1');    oDiv.onmouseover=function ()    {        startMove(oDiv, {width: 200, height: 200, marginLeft: -50, marginTop: -50});    };    oDiv.onmouseout=function ()    {        startMove(oDiv, {width: 100, height: 100, marginLeft: 0, marginTop: 0});    };};</script></head><body><div id="div1"></div></body></html>

参考：JavaScript 动画

阅读全文

0 0