一、匀速运动
从开始到结束速度都不变
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{ 100px; height:100px; background:red; position:absolute; left:0; top:50px; } 5 .bor-r { border-right:1px #CCC solid; height:500px; 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>