JS运动的各种问题【二】

来源：互联网发布：电脑深度清理软件编辑：程序博客网时间：2024/06/08 02:48

JS多物体运动的各种问题

问题一：

希望实现的功能：三个平行div自由的平行缩放。

代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div{            width: 100px;            height: 50px;            background: yellow;            margin: 10px;        }    </style>    <script>        window.onload=function(){            var oDiv=document.getElementsByTagName('div');            for (var i=0;i<oDiv.length;i++){                oDiv[i].timer=null;                oDiv[i].onmouseover=function(){                    move(300,this);                };                oDiv[i].onmouseout=function(){                    move(100,this);                };            }        };        function move(iTarget,oDiv){            clearInterval(oDiv.timer);            oDiv.timer=setInterval(function(){                var speed=(iTarget-oDiv.offsetWidth)/5;                speed=speed>0?Math.ceil(speed):Math.floor(speed);                if (iTarget==oDiv.offsetWidth){                    clearInterval(oDiv.timer);                }else{                    oDiv.style.width=oDiv.offsetWidth+speed+"px";                }            },30);        }    </script></head><body><div id="div1"></div><div id="div2"></div><div id="div3"></div></body></html>

注意事项：

多物体运动如果只是设置一个定时器（设置全局定时器）的话，那么三个div共用一个一个全局定时器，那么当一个div没有完成缩小动作的时候另一个div开启定时器执行伸展动作，由于定时器是全局的，那么上一个div的定时器将被覆盖即取消掉，故上一个定时器无法完全地昨晚缩小动作，解决办法是给每一个div设置一个属性timer。

问题二：

希望实现的功能：多图片的淡入淡出。

代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div{            width: 200px;            height: 200px;            margin: 10px;            background: yellow;            float: left;            filter: alpha(opacity:30);            opacity: 0.3;        }    </style>    <script>        window.onload=function(){            var oDiv=document.getElementsByTagName('div');            for(var i=0;i<oDiv.length;i++){                oDiv[i].timer=null;                oDiv[i].alpha=30;                oDiv[i].onmouseover=function(){                    move(100,this);                };                oDiv[i].onmouseout=function(){                    move(30,this);                };            }        };        function move(iTarget,obj){            clearInterval(obj.timer);            obj.timer=setInterval(function(){                var speed=(iTarget-obj.alpha)/30;                speed=speed>0?Math.ceil(speed):Math.floor(speed);                if (obj.alpha==iTarget){                    clearInterval(obj.timer);                }else{                    obj.alpha+=speed;                    obj.style.filter="alpha(opacity:"+obj.alpha+")";                    obj.style.opacity=obj.alpha/100;                }            },30);        }    </script></head><body><div></div><div></div><div></div><div></div></body></html>

希望实现的功能：多物体不同方向的伸缩功能。

代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div{            width: 100px;            height: 100px;            margin: 10px;            background: yellow;            float: left;            border: 10px solid black;        }    </style>    <script>        window.onload=function(){            var oDiv1=document.getElementById('div1');            var oDiv2=document.getElementById('div2');            oDiv1.timer=null;            oDiv2.timer=null;            oDiv1.onmouseover=function(){                move(this,400,'height');            };            oDiv1.onmouseout=function(){                move(this,100,'height');            };            oDiv2.onmouseover=function(){                move(this,400,'width');            };            oDiv2.onmouseout=function(){                move(this,100,'width');            };        };        function getStyle(obj,name){            if(obj.currentStyle){                return obj.currentStyle[name];            }else{                return getComputedStyle(obj,false)[name];            }        };        function move(obj,iTarget,name){            clearInterval(obj.timer);            obj.timer=setInterval(function(){                var cur=parseInt(getStyle(obj,name));                var speed=(iTarget-cur)/30;                speed=speed>0?Math.ceil(speed):Math.floor(speed);                if(cur==iTarget){                    clearInterval(obj.timer);                }else{                    obj.style[name]=cur+speed+"px";                }            },30);        };    </script></head><body><div id="div1"></div><div id="div2"></div></body></html>

注意事项：

1.offsetwidth所获得的并不只是物体的纯宽度，还有物体的变宽以及外边距。那么在obj.style.width=obj.offsetwidth-1+"px";这句中，本意是希望图片缩小以1px的速度匀速缩小，但是如果将边框的宽度设置为1px而非0px，那么offsetwidth的值其实是obj的width（注意：不是style.width即不是行间的width）+2，上面这句变成了obj.style.width=obj的width+2-1+“px”；图像反而增大了。解决的办法就是不用offsetwidth，而用obj的width。width通过getStyle方法获得。

2.getStyle方法得到的是string。需要用parseint强制转换成数字类型。

完整的运动框架：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        #div1{            width: 200px;            height: 200px;            margin: 20px;            background: yellow;            border: 5px solid black;            filter: alpha(opacity:30);            opacity: 0.3;        }    </style>    <script>        window.onload=function(){            var oDiv1=document.getElementById('div1');            oDiv1.timer=null;            oDiv1.onmouseover=function(){                move(this,100,'opacity');            };            oDiv1.onmouseout=function(){                move(this,30,'opacity');            };        };        function getStyle(obj,name){            if(obj.currentStyle){                return obj.currentStyle[name];            }else{                return getComputedStyle(obj,false)[name];            }        };        function move(obj,iTarget,name){            clearInterval(obj.timer);            obj.timer=setInterval(function(){                var cur=0;                if(name=='opacity'){                    cur=Math.round(parseFloat(getStyle(obj,name))*100);                }else{                    cur=parseInt(getStyle(obj,name));                }                var speed=(iTarget-cur)/30;                speed=speed>0?Math.ceil(speed):Math.floor(speed);                if(cur==iTarget){                    clearInterval(obj.timer);                }else{                    if(name=='opacity'){                        obj.style.opacity=(cur+speed)/100;                        obj.style.filter='alpha(opacity:'+cur+speed+')';                    }else{                        obj.style[name]=cur+speed+"px";                    }                }            },30);        };    </script></head><body><div id="div1"></div></body></html>

框架下载地址：http://download.csdn.net/detail/mememen1987/8602965

0 0