• 匀速运动及案例


    匀速运动:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>Document</title>
     6         <style>
     7             #div1{100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 100px}
     8         </style>
     9         <script>
    10             
    11 
    12             /*
    13                 1、距离 < speed 停差不多了。
    14 
    15             */
    16 
    17             window.onload = function(){
    18                 var oDiv = document.getElementById("div1");
    19                 var timer = null;
    20                 document.onclick = function(){
    21                     var speed = 7;
    22                     clearInterval(timer);
    23                     timer = setInterval(function(){
    24 
    25 
    26                         
    27                         if(Math.abs(500 - oDiv.offsetLeft) < Math.abs(speed)){
    28                             clearInterval(timer);
    29                             //2、手动将物体挪动到目的值
    30                             oDiv.style.left = "500px";
    31                         }else{
    32                             oDiv.style.left = oDiv.offsetLeft + speed  + 'px';
    33                         }
    34                     }, 30);
    35                 }
    36             }
    37         </script>
    38     </head>
    39     <body>
    40         <div id = 'div1'></div>
    41         <span style = '1px; height: 200px; background-color:black; position:absolute; left: 500px'></span>
    42     </body>
    43 </html>

    效果:

    封装匀速运动函数:

     1 //了解
     2 //node运动元素对象speed运动速度数字   attr 要运动的属性 width  iTarget 目标值 200,complate 完成后要执行的函数
     3 function startMove(node, speed, attr, iTarget, complete){ //complete = show
     4                 clearInterval(node.timer);
     5                 node.timer = setInterval(function(){
     6                     //1、获取当前的值
     7                     var iCur = null;
     8                     if(attr == "opacity"){
     9                         iCur = parseInt(parseFloat(getStyle(node, attr)) * 100);
    10                     }else{
    11                         iCur = parseInt(getStyle(node, attr))
    12                     }
    13                     //2、计算速度
    14                     if(iCur < iTarget){
    15                         speed = Math.abs(speed);
    16                     }else{
    17                         speed = -Math.abs(speed);
    18                     }
    19 
    20                     //3、运动和停止分开
    21                     if(Math.abs(iTarget - iCur) < Math.abs(speed)){
    22                         clearInterval(node.timer);
    23                         /*
    24                             手动将属性挪动到目的值。    
    25                         */
    26                         if(attr == "opacity"){
    27                             node.style.opacity = iTarget / 100;
    28                             node.style.filter = "alpha(opacity=" + iTarget + ")";
    29                         }else{
    30                             node.style[attr] = iTarget + "px";
    31                         }
    32 
    33                         if(complete){
    34                             complete();
    35                         }
    36                     }else{
    37                         if(attr == "opacity"){
    38                             iCur += speed;
    39                             node.style.opacity = iCur / 100;
    40                             node.style.filter = "alpha(opacity=" + iCur + ")";
    41                         }else{
    42                             node.style[attr] = iCur + speed + "px";
    43                         }
    44                     }
    45                 }, 30);
    46             }
    47 
    48             function getStyle(obj, attr){
    49                 if(obj.currentStyle){
    50                     return obj.currentStyle[attr];
    51                 }else{
    52                     return getComputedStyle(obj)[attr];
    53                 }
    54             }

    案例:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style>
                #div1{ 100px; height: 100px; background-color: red; position: absolute; left: 100px; top: 100px}
                #div2{ 200px; height: 200px; background-color: black; position: absolute;left: 100px; top: 100px}
            </style>
            <script src = "line_startMove.js"></script>
            <script>
                window.onload = function(){
                    var oDiv1 = document.getElementById('div1');
                    oDiv1.onmouseover = function(){
                        startMove(oDiv1, 3, "width", 200, function(){
                            startMove(oDiv1, 3, "height", 200)
                        })
                    }
    
                    oDiv1.onmouseout = function(){
                        startMove(oDiv1, 3, "width", 100, function(){
                            startMove(oDiv1, 3, "height", 100)
                        })
                    }
                }
            </script>
        </head>
        <body>
            <div id = 'div2'></div>
            <div id = 'div1'></div>
        </body>
    </html>

    效果:

  • 相关阅读:
    ​DBEngines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座
    深入了解 BTree 和 B+Tree 的区别
    exec详解
    javascript之property's attributes
    极客公园之李彦宏讲话要点
    C++之auto_ptr
    javascript之属性状态控制Method
    ARM寄存器简介
    linux之fcntl
    http之100continue
  • 原文地址:https://www.cnblogs.com/taohuaya/p/9638041.html
Copyright © 2020-2023  润新知