代码改变世界

js运动原理

2013-11-24 23:13  臭小子1983  阅读(436)  评论(0)  编辑  收藏  举报

一、匀速运动

　　从开始到结束速度都不变

 1 <input type="button" value="开始" id="btn">
 2 <div class="box"></div>
 3 
 4 <script src="../js/jquery-1.7.2.min.js"></script>
 5 <script>
 6     var btn = $("#btn");
 7     var box = $(".box");
 8     var timer = null;
 9     var speed = 10;
10 
11     btn.click(function(){
12         clearInterval(timer);
13 
14         timer = setInterval(function(){
15             console.log("a")
16             var _boxLeft = box.offset().left;
17             console.log(_boxLeft);
18             box.css("left", _boxLeft += speed);
19         }, 30);
20 
21     })
22 </script>

 

 

二、加、减速运动

　　速度越来越慢，或者事度越来越快

　　公式：速度 = 速度 + 系数;　　　　// 速度不断增加或减少速度减小到负值，会向反方向运动

 1 CSS：
 2 <style>
 3 body { margin: 0; }
 4 .box{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; }
 5 .bor-r { border-right:1px #CCC solid; height:500px; width:500px; }
 6 </style>
 7 
 8 HTML：
 9 <input type="button" value="加速运动" id="btn">
10 <div class="box"></div>
11 <div class="bor-r"></div>
12 
13 <script src="../js/jquery-1.7.2.min.js"></script>
14 <script>
15     var btn = $("#btn");
16     var box = $(".box");
17     var timer = null;
18     var speed = 1;          // 速度
19     var distance = 500;      // 距离
20     var factor = 10;         // 系数（如果为真加速度如果为负为减速度）
21 
22     btn.click(function(){
23         clearInterval(timer);
24 
25         timer = setInterval(function(){
26             var _boxLeft = box.offset().left;
27             // console.log(speed + ":" +_boxLeft);
28 
29             if(_boxLeft > distance){
30                 clearInterval(timer);
31                 box.css("left", distance);
32             }
33             else{
34                 speed = speed + factor;
35                 box.css("left", _boxLeft += speed);
36             }
37         }, 30);
38 
39     })
40 </script>

 

 

三、缓冲运动

　　速度 = （总距离 - 居左距离）/ 系数;　　　　系数越小缓冲效果明显

 1 <input type="button" value="缓冲运动" id="btn">
 2 <div class="box"></div>
 3 <div class="bor-r"></div>
 4 
 5 <script src="../js/jquery-1.7.2.min.js"></script>
 6 <script>
 7     var btn = $("#btn");
 8     var box = $(".box");
 9     var timer = null;
10     var speed = 1;          // 速度
11     var distance = 1000;      // 距离
12     var factor = 10;         // 系数（如果为真加速度如果为负为减速度）
13 
14     btn.click(function(){
15         clearInterval(timer);
16 
17         timer = setInterval(function(){
18             var boxLeft = box.offset().left;
19             if(boxLeft >= distance){
20                 clearInterval(timer);
21             }
22             else{
23                 speed = (distance - boxLeft) / factor;
24                 speed > 0 ? speed = Math.ceil(speed) : speed = Math.float(speed);　　　　// 防止速度speed为0，这样没到目标点就停了下来，如果大于0就向上取整，如果小于0就向下取整
25                 console.log(speed);
26                 box.css("left", boxLeft + speed);
27             }
28         }, 30);
29 
30     })
31 </script>

 

 

四、链式运动

　　链式运动就是执行完一个运动后接着在执行指定的另一个运动，如：一个方块先移动位置，在改变它的宽度

 

 

五、弹性运动

　　1、弹性运动：在目标点左边，加速；在目标点右边，减速根据距离，计算加速度

　　var 速度 = (目标点 - 变化值)/系数;

　　速度取整

 

　　2、带摩擦力的弹性运动：弹性运动+摩擦力

　　速度 += (目标点 - 变化值)/系数; // 6,7,8

　　速度 *= 摩擦系数; // 0.7 0.75

 1 <input type="button" value="弹性运动" id="btn">
 2 <div class="box"></div>
 3 <div class="bor-r"></div>
 4 
 5 <script src="../js/jquery-1.7.2.min.js"></script>
 6 <script>
 7     var btn = $("#btn");
 8     var box = $(".box");
 9     var timer = null;
10     var speed = 0;           // 速度
11     var distance = 500;      // 距离
12     var factor = 6;         // 系数（如果为真加速度如果为负为减速度）
13 
14     btn.click(function(){
15         clearInterval(timer);
16 
17         timer = setInterval(function(){
18             var boxLeft = box.offset().left;
19 
20             /*
21                 if(oDiv.offsetLeft < 500){
22                     iSpeed += (500 - oDiv.offsetLeft)/50;
23                 }
24                 else{
25                     iSpeed -= (oDiv.offsetLeft - 500)/50;
26                 }
27             */
28             speed += (distance - boxLeft) / factor;            // 与上面盘断代码相同  factor系数为6,7,8最好
29             speed *= 0.75;                                     // 增加摩擦系数使物体停下来，设置为0.7 0.75最宜
30             console.log(speed + " : " +Math.abs(speed) + " : " + (distance - boxLeft));
31             
32             // 这个判断解决如果物体未达到目标，而speed运动的值为0时，出现的未达到终点的问题
33             // 如果速度<=1 并且 距离-距左 >= 1 清除定时器
34             if(Math.abs(speed) <= 1 && Math.floor(distance - boxLeft) >= 1){
35                 clearInterval(timer);
36                 box.css("left", distance);
37                 speed = 0;
38             }
39             else{
40                 box.css("left", boxLeft + speed);
41             }
42         }, 30);
43     })
44 </script>

 

六、运动过界

 1 <div id="div1"></div>
 2 
 3 <script src="../js/jquery-1.7.2.min.js"></script>
 4 <script>
 5     var box = $("#div1");
 6     var timer = null;
 7     var speed = 50;
 8 
 9     box.bind("mouseover", function(){
10         startMove(300);
11     })
12 
13     box.bind("mouseout", function(){
14         startMove(30);
15     })
16 
17     function startMove(target){
18         clearInterval(timer);
19 
20         timer = setInterval(function(){
21             var getboxHeight = box.height();
22 
23             speed += (target-getboxHeight)/6;
24             speed *= 0.75;
25             console.log(speed);
26 
27             if(Math.abs(speed) <= 1 && Math.floor(target-getboxHeight) >= 1){
28                 clearInterval(timer);
29                 box.css("height", target);
30                 speed = 0;
31             }
32             else{
33                 var _h = getboxHeight + speed;
34 
35                 if(_h < 0){
36                     _h = 0;
37                 }
38                 box.css("height", _h);
39             }
40 
41         }, 30);
42     }
43 </script>

 

七、浮窗原理

 1 <div id="div1"></div>
 2 <input type="button" id="stopBtn" value="停止">
 3 
 4 <script src="../js/jquery-1.7.2.min.js"></script>
 5 <script>
 6     var timer = null;
 7     $("#stopBtn").click(function(){
 8         clearInterval(timer);
 9     })
10 
11     floating();
12 
13     function floating(){
14         var box = $("#div1");
15 
16         var speedX = 10;
17         var speedY = 10;
18 
19         clearInterval(timer);
20 
21         timer = setInterval(function(){
22             var boxTop = box.offset().top;
23             var boxLeft= box.offset().left;
24 
25             var boxWidth = box.width();
26             var boxheight = box.height();
27 
28             var winWidth = $(window).width();
29             var winHeight = $(window).height();
30 
31             if(boxTop > (winHeight - boxheight)){       // 接触底边
32                 boxTop = winHeight - boxheight;
33                 speedY *= -1;
34             }
35             else if(boxLeft > winWidth - boxWidth){     // 接触到最右端
36                 boxLeft = winWidth - boxWidth;
37                 speedX *= -1;
38             }
39             else if(boxTop < 0){                        // 接触到最上端
40                 boxTop = 0;
41                 speedY *= -1;
42             }
43             else if(boxLeft < 0){                       // 接触到最左边
44                 boxLeft = 0;
45                 speedX *= -1;
46             }
47 
48             box.css({"top": boxTop+speedY, "left": boxLeft+speedX});
49 
50         },30);
51     }
52 </script>