匀速运动及案例

匀速运动：

 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>

效果：

相关阅读:
python 3.6.2 使用VScode 安装requests包
 JExcel读取Excel，完成随机数对应学号，随机选取学生姓名
 HashMap和Map的道道
 腾讯云主机windows 2012 r2搭建ftp服务器
 关于网站域名访问出现welcome to nginx 的问题
 腾讯云主机windows 2012 r2标准版&&搭建java环境（jdk+tomcat）
Anaconda 安装+使用+换源+更新
 已知三点求平面方程、平面法向量和点到平面的距离
 Open Cascade：计算体积
 VS2015安装QT插件
原文地址：https://www.cnblogs.com/taohuaya/p/9638041.html