多物体运动框架1

最新推荐文章于 2019-08-27 18:20:33 发布
最新推荐文章于 2019-08-27 18:20:33 发布
阅读量198 收藏 1
点赞数
分类专栏： 智能社_js 文章标签： 多物体运动框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40512519/article/details/82589635
版权
  •  多物体同时运动
  •             多个div,鼠标移入变宽
  •                    单定时器，存在问题
  •                    每个Div一个定时器

多物体运动不能共用一个定时器，每个div定一个定时器。

多物体运动不能共用一个属性，所有东西不能共用。

鼠标一接触，其宽度到300px.

<style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 5px;
        }
    </style>
</head>
<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div');
        for(var i=0;i<oDiv.length;i++){
            oDiv[i].onmouseover=function(){
                startMove(300,this);
            }

            oDiv[i].onmouseout=function(){
                startMove(100,this);
            }
        }

    }

    var timer=null;
    function startMove(iTarget,obj){
        clearInterval(timer);
        timer=setInterval(function(){
            var speed=(iTarget-obj.offsetWidth)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.offsetWidth==iTarget){
                clearInterval(timer)
            }else{
                obj.style.width=obj.offsetWidth+speed+'px';
            }

        },30);


    }

</script>
<body>
<div></div>
<div></div>
<div></div>

</body>

问题：整个程序中只有一个定时器，当鼠标从一个div移到另一个div中，所以前一个div变不会原来的位置。

在每个obj上面都加一个定时器。

<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(){
                startMove(300,this);
            }

            oDiv[i].onmouseout=function(){
                startMove(100,this);
            }
        }

    }

    /*var timer=null;*/
    function startMove(iTarget,obj){
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            var speed=(iTarget-obj.offsetWidth)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.offsetWidth==iTarget){
                clearInterval(obj.timer)
            }else{
                obj.style.width=obj.offsetWidth+speed+'px';
            }

        },30);
    }

</script>

多个div淡入淡出

 <style>
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
            float: left;
            background: red;
            filter:alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
</head>
<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(){
                startMove(this,100);
            }

            oDiv[i].onmouseout=function(){
                startMove(this,30);
            }
        }

    }
    var alpha=30;
    /*var timer=null;*/
    function startMove(obj,iTarget){
        clearInterval(obj.timer);
          obj.timer=setInterval(function(){
            /*var speed=0;
            if(iTarget>alpha){
                speed=10;
            }else{
                speed=-10;
            }*/
              var speed=(iTarget-alpha)/6;
              speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(alpha==iTarget){
                clearInterval(obj.timer);
            }else{
                alpha+=speed;
                obj.style.filter='alpha(opacity:'+alpha+')';//IE
                obj.style.opacity=alpha/100;
            }
        },30);
    }
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

还是有问题。在多物体运动中，所有的东西都不能共用。alpha共用了。

  • 多物体运动框架
  •             定时器作为物体的属性
  •             参数的传递：物体、目标值
  •                  多个物体淡入淡出：
  •                      所有东西都不能共用
  •                      属性与运动对象绑定
<style>
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
            float: left;
            background: red;
            filter:alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
</head>
<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div');
        for(var i=0;i<oDiv.length;i++){
            oDiv[i].alpha=30;
            oDiv[i].timer=null;
            oDiv[i].onmouseover=function(){
                startMove(this,100);
            }

            oDiv[i].onmouseout=function(){
                startMove(this,30);
            }
        }

    }
    var alpha=30;
    /*var timer=null;*/
    function startMove(obj,iTarget){
        clearInterval(obj.timer);
          obj.timer=setInterval(function(){
            /*var speed=0;
            if(iTarget>alpha){
                speed=10;
            }else{
                speed=-10;
            }*/
              var speed=(iTarget-obj.alpha)/6;
              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+')';//IE
                obj.style.opacity=obj.alpha/100;
            }
        },30);
    }
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

offsetWidth:width+border+padding.

 <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
    </style>
    <script>
        setInterval(function(){
            var oDiv=document.getElementById('div1');
            oDiv.style.width=oDiv.offsetWidth-1+'px';

        },30);
    </script>
</head>
<body>
<div id="div1"></div>

</body>

红块的宽度不会减少反而会增加oDiv.offsetWidth=202.

解决方法我们用行间样式获取width。

<style>
        #div1{
            height: 200px;
            background: red;
            border: 1px solid black;
        }
    </style>
    <script>
        setInterval(function(){
            var oDiv=document.getElementById('div1');
            oDiv.style.width=parseInt(oDiv.style.width)-1+'px';

        },30);
    </script>
</head>
<body>
<div id="div1" style="width: 200px"></div>

</body>

注意：style只能取行间样式，如果width放在样式表里，就不能style.width获取了。

获取样式表的属性：

<style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
    </style>
    <script>
        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        setInterval(function(){
            var oDiv=document.getElementById('div1');
            oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';

        },30);
    </script>
</head>
<body>
<div id="div1"></div>

</body>

我们不能再用offsetWidth了，

两个div变宽变高：

<style>
        #div1,#div2{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseover=function(){
                startMove(this,300);
            }
            oDiv1.onmouseout=function(){
                startMove(this,100);
            }

            var oDiv2=document.getElementById('div2');
            oDiv2.onmouseover=function(){
                startMove2(this,300);
            }
            oDiv2.onmouseout=function(){
                startMove2(this,100);
            }



        }

        function startMove(obj,iTarget){

           /* var timer=null;*/
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var speed=(iTarget-obj.offsetHeight)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(obj.offsetHeight==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style.height=obj.offsetHeight+speed+"px";
                }
            },30);
        }

        function startMove2(obj,iTarget){

            /*var timer=null;*/
            clearInterval(obj.timer);
            timer=setInterval(function(){
                var speed=(iTarget-obj.offsetWidth)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(obj.offsetWidth==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style.width=obj.offsetWidth+speed+"px";
                }
            },30);
        }
    </script>

</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>

不用offsetWidth.....:

 <style>
        #div1,#div2{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            border: 10px solid black;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseover=function(){
                startMove(this,300);
            }
            oDiv1.onmouseout=function(){
                startMove(this,100);
            }

            var oDiv2=document.getElementById('div2');
            oDiv2.onmouseover=function(){
                startMove2(this,300);
            }
            oDiv2.onmouseout=function(){
                startMove2(this,100);
            }



        }

        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        function startMove(obj,iTarget){

           /* var timer=null;*/
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var cur=parseInt(getStyle(obj,'height'));
                var speed=(iTarget-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style['height']=cur+speed+"px";
                }
            },30);
        }

       /* function startMove2(obj,iTarget){

            /!*var timer=null;*!/
            clearInterval(obj.timer);
            timer=setInterval(function(){
                var speed=(iTarget-obj.offsetWidth)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(obj.offsetWidth==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style.width=obj.offsetWidth+speed+"px";
                }
            },30);
        }*/
    </script>

</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
  • 任意值运动框架 ：

 简化：使用一个函数。

<style>
        #div1,#div2{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            border: 10px solid black;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseover=function(){
                startMove(this,300,'height');
            }
            oDiv1.onmouseout=function(){
                startMove(this,100,'height');
            }

            var oDiv2=document.getElementById('div2');
            oDiv2.onmouseover=function(){
                startMove(this,300,'width');
            }
            oDiv2.onmouseout=function(){
                startMove(this,100,'width');
            }



        }

        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        function startMove(obj,iTarget,attr){

           /* var timer=null;*/
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var cur=parseInt(getStyle(obj,attr));
                var speed=(iTarget-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style[attr]=cur+speed+"px";
                }
            },30);
        }
    </script>

</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>

上面的代码不仅仅可以让width和height变化，也可以让其他属性变化。但是opacity不可以。

 var oDiv3=document.getElementById('div3');
            oDiv3.onmouseover=function(){
                startMove(this,50,'fontSize');
            }
            oDiv3.onmouseout=function(){
                startMove(this,14,'fontSize');
            }

opacity也可以：

 <style>
        #div1{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            border: 10px solid black;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseover=function(){
                startMove(this,100,'opacity');
            }
            oDiv1.onmouseout=function(){
                startMove(this,30,'opacity');
            }


        }

        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        function startMove(obj,iTarget,attr){

           /* var timer=null;*/
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var cur=0;
                if(attr=='opacity'){
                    cur=parseFloat(getStyle(obj,attr))*100;
                }else{
                    cur=parseInt(getStyle(obj,attr));
                };
                var speed=(iTarget-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    if(attr=='opacity'){
                        obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                        obj.style.opacity=(cur+speed)/100;
                    }else{
                        obj.style[attr]=cur+speed+"px";
                    };

                }
            },30);
        }
    </script>

</head>
<body>
<div id="div1"></div>

</body>

计算机不能真正存储小数。其实它存的是近似值。

Math.round();四舍五入。

  //Math.round四舍五入
  cur=Math.round(parseFloat(getStyle(obj,attr))*100);

 

蔡蔡动起来
关注
专栏目录
JS完美运动框架详解——原理分析及demo
波克比的前端CSDN博客
12-18 1万+
1.运动原理 Js运动，本质来说，就是让 web 上 DOM 元素动起来。而想要 DOM 动起来，改变其自身的位置属性，比如高宽，左边距，上边距，透明度等。还有一个很重要的前提是，运动的物体必须是绝对定位。 window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.oncl
JavaScript运动框架 多物体任意值运动（三）
10-19
JavaScript运动框架在处理多物体进行任意属性值的运动时提供了丰富的功能，它允许页面中不同的元素根据用户的交互（如鼠标移入移出）来动态改变其属性，比如高度、宽度、字体大小以及透明度等。这种框架的实现依赖于...
多物体运动框架
yutin781528452的博客
08-21 208
多个div变宽 这样写，当只有一个div的时候是没有问题的 ，但是当有多个div的时候就会发现，如果鼠标移动的快点的话，移动到后一个div时，前一个div还没有缩回去：    这是因为程序中只有一个定时器，当前一个div正在动的时候，鼠标移到第二个，那么程序就开始执行第二个div了，第一个div的程序就停止了 。 所以我们就多加几个定时器：     多图片淡入淡出     ...
Javascript运动概念2——多物体运动框架
zxy9602的博客
11-16 366
1、多个物体同时运动 例子：多个div，鼠标移入变宽 （1）单定时器，存在问题 （2）每个div一个定时器 2、多物体运动运动框架 （1）多物体运动框架 a、定时器作为物体的属性 b、参数的传递：物体、目标值 c、例子：多个div淡入淡出 所有东西都不能共用 属性与运动对象绑定：速度、其他属性值（如透明度等） （2）任意值运动框架 a、offset属性的bug
深度讲解多物体运动框架
weixin_44415461的博客
08-27 146
封装⼀个⽅法让多个物体共⽤,本节讲解变速运动 注意变速运动要做向上向下取整的操作 注意再重新启动定时器是要把之前的定时器清除 多物体运动每个物体要有⾃⼰的定时器，共⽤会出现bug <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>深度讲解多物体运...
js实现多物体不同运动框架
YZi_Angel的专栏
08-13 895
欢迎各位亲们赏脸观看 _我们都知道，网站中有很多的运动，其需求不同，但大体结构类似。如果我们把每个功能模块都写出来，不仅浪费时间，而且浪费很多代码空间，增加代码冗余，使代码显得杂乱无章。 今天我们就来写一个框架，将不同的运动封装成一个方法，让不同的运动共用这一个方法，节省时间、空间。而且，这个框架一旦完成，无论何时想用，只要一个调用，就可以实现。 这个方法能实现的运动有变宽、变高、变字体大小、变透
js实现多物体运动框架并兼容各浏览器
壹间show
07-25 1041
首先，我们需要知道在js中获取对象的宽度如offsetWidth等，可能会存在一些小小的bug。原因之一在于offsetWidth仅仅只是获取盒子模型中内容的部分宽度，并不包含内边距，边框和外边距，这样会导致控制对象运动与预期不符，这里就不详细的去解释。 而为了解决这个问题，在这里，我们提供了一个方法来保证我们的运动的准确性。 style只能获取元素的内联样式，内部样式和外部样式使用s
多物体，任意值运动框架
大前端
07-10 964
跟着视频学习些的运动框架，使用很简单，简单写一个使用的例子： 鼠标移入将透明度从60变成100，前提是css布局里面对象已经有opacity属性值 window.onload=function() { var aDiv=document.getElementsByTagName('div'); var i=0; for(i=0;i { aDiv[i].onmouseover
完美运动框架
ZYWSWZ的博客
02-11 369
多物体运动效果如下 鼠标经过物体发生变化 css样式＋html js代码 其中引入的tool.js 使用了获取有效样式 获取有效样式 以上只是多物体运动，不太完美不能运用到所有的运动物体中，所以又封装了相比较之下的完美运动框架 可以封装为js文件，直接引用了，只要是用到运动的物体都可以使用（链式运动、淡入淡出、缓冲运动、以及多物体的运动） ...
js多个物体运动功能实例分析
10-20
1. 实现多个物体运动的基础原理：在多物体运动中，每个物体的运动都需要被独立跟踪，这意味着运动函数需要接收两个关键参数，一个是目标对象（obj），另一个是运动目标值（iTarget）。这种设计允许函数了解哪个物体...
JavaScript实现多个物体同时运动
11-21
2. **多物体运动框架** 为了优化性能和管理多个物体的运动，可以创建一个运动框架，通过将定时器作为物体的属性参数传递。这样，每个物体都有自己的运动状态，而不是共用同一个定时器。例如，实现多个Div的淡入淡出...
js事件基础（事件event对象,事件冒泡，鼠标键盘事件）
weixin_40512519的博客
09-14 2110
事件对象（获取事件的详细信息）和事件冒泡： 什么是event对象：获取事件的详细信息：鼠标位置、键盘按键。                    document本质：document.childNodes[0].tagName 获取event对象（兼容性写法）：var oEvent=ev||event; //点击界面没有反应。因为body里面没有内容，没有撑开。 &lt;script&gt...
js面向对象实例
weixin_40512519的博客
09-18 1328
实例：面向对象的选项卡 原则：不能有函数套函数，但可以有全局变量。 过程             onload     ----        构造函数            全局变量  ----       属性            函数        ----        方法 改错           this、事件、闭包、传参 对象与闭包          通过闭包传递th...
js运动基础2 右侧悬浮框 缓冲运动 匀速运动的停止条件
weixin_40512519的博客
09-09 906
缓冲运动： 逐渐变慢，最后停止 距离越远速度越大（速度由距离决定  速度=（目标值-当前值）/缩放系数） 例子：缓冲菜单 （Bug:速度取整） 缓冲运动：随着距离减小，速度也越来越小。用除数控制速度。速度用整数。 oDiv.offsetTop //滚动条滚动的距离+窗口距离-物体宽度 &lt;style&gt; #div1{ width: 100px; ...
BOM应用(open、close、scrollTop)
weixin_40512519的博客
09-19 425
 打开、关闭窗口： open &lt;body&gt; &lt;input type="button" value="打开窗口" onclick="window.open('http://www.baidu.com')"/&gt; &lt;/body&gt; document.write:先清空然后再写。 &lt;body&gt; &lt;input type=&qu
js事件高级应用01（事件绑定 、高级拖拽）
weixin_40512519的博客
09-16 404
事件绑定         IE方式               attachEvent(事件名称、函数)，绑定事件处理函数               detachEvent(事件名称、函数)，解除绑定        DOM方式                addEventListener(事件名称，函数，捕获)                removeEventListener(...
js事件高级应用02（带框拖拽、自定义滚动条）
weixin_40512519的博客
09-15 357
带框拖拽： &lt;style&gt; #div1{ width: 100px; height: 100px; background: red; position: absolute; } .box{ border: 1px ...
js事件中级（默认行为，拖拽）
weixin_40512519的博客
09-14 332
默认行为：浏览器自带的行为。 阻止默认/右键事件： &lt;script&gt; document.oncontextmenu=function(){ return false;//阻止默认事件 } &lt;/script&gt; 例子： 屏蔽右键菜单    弹出自定义右键菜单 只能输入数字的输入框   keydown  keyup事件的区别 //屏蔽...
深入js
weixin_40512519的博客
09-03 332
函数返回值： &lt;script&gt; //一个函数只返回一种类型的值。 function show(a,b){ return;//undefined.如果没有return，也是 undefined } alert(show(3,5)) &lt;/script&gt; 函数传参： 可变参(不定参)，arguments:可以有无数个参数。...
JavaScript运动框架与多物体动画
"09-JS运动应用.pptx - 一份关于JavaScript运动应用的课程教学材料，涵盖了多物体运动框架、动画实现以及常见问题解决等内容。" 在JavaScript中，运动应用是实现动态效果的关键，特别是在网页交互设计中。这份JS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值