JavaScript 动画之图片表格布局预览放大

来源：互联网发布：手机淘宝申请账号注册编辑：程序博客网时间：2024/05/21 09:28

这里写图片描述

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>* {margin:0; padding:0;}#ul1 {width:366px; margin:0 auto; position:relative;}#ul1 li {list-style:none; width:100px; height:100px; background:#CCC; border:1px solid black; float:left; margin:10px; z-index:1;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="move2.js"></script><script>window.onload=function (){    var oUl=document.getElementById('ul1');    var aLi=oUl.getElementsByTagName('li');    var iMinZindex=2;    var i=0;    //1.布局转换    for(i=0;i<aLi.length;i++)    {        //aLi[i].innerHTML='left:'+aLi[i].offsetLeft+', top:'+aLi[i].offsetTop;        aLi[i].style.left=aLi[i].offsetLeft+'px';        aLi[i].style.top=aLi[i].offsetTop+'px';    }    for(i=0;i<aLi.length;i++)    {        aLi[i].style.position='absolute';        aLi[i].style.margin='0';    }    //2.加事件    for(i=0;i<aLi.length;i++)    {        aLi[i].onmouseover=function ()        {            this.style.zIndex=iMinZindex++;            startMove(this, {width: 200, height: 200, marginLeft: -50, marginTop: -50});        };        aLi[i].onmouseout=function ()        {            startMove(this, {width: 100, height: 100, marginLeft: 0, marginTop: 0});        };    }};</script></head><body><ul id="ul1" style="margin-top:100px;">    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul></body></html>

参考：JavaScript 动画

阅读全文

0 0