JS运动的各种问题【二】

最新推荐文章于 2024-08-12 22:28:07 发布

亲爱的汉尼拔

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量474

点赞数

分类专栏： HTML5 文章标签： JS运动 javascript html CSS 框架

本文链接：https://blog.csdn.net/mememen1987/article/details/45074669

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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.οnlοad=function(){
            var oDiv=document.getElementsByTagName('div');
            for (var i=0;i<oDiv.length;i++){
                oDiv[i].timer=null;
                oDiv[i].οnmοuseοver=function(){
                    move(300,this);
                };
                oDiv[i].οnmοuseοut=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.οnlοad=function(){
            var oDiv=document.getElementsByTagName('div');
            for(var i=0;i<oDiv.length;i++){
                oDiv[i].timer=null;
                oDiv[i].alpha=30;
                oDiv[i].οnmοuseοver=function(){
                    move(100,this);
                };
                oDiv[i].οnmοuseοut=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.οnlοad=function(){
            var oDiv1=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            oDiv1.timer=null;
            oDiv2.timer=null;
            oDiv1.οnmοuseοver=function(){
                move(this,400,'height');
            };
            oDiv1.οnmοuseοut=function(){
                move(this,100,'height');
            };
            oDiv2.οnmοuseοver=function(){
                move(this,400,'width');
            };
            oDiv2.οnmοuseοut=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.οnlοad=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.timer=null;
            oDiv1.οnmοuseοver=function(){
                move(this,100,'opacity');
            };
            oDiv1.οnmοuseοut=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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS运动的各种问题【二】

JS多物体运动的各种问题问题一：希望实现的功能：三个平行div自由的平行缩放。代码： div{ width: 100px; height: 50px; background: yellow; margin: 10px;
复制链接

扫一扫

专栏目录