标签：func click alt 函数 math speed load oat black
匀速运动：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #div1{width: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 = ‘width: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{width: 100px; height: 100px; background-color: red; position: absolute; left: 100px; top: 100px}
#div2{width: 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>
效果：
标签：func click alt 函数 math speed load oat black
原文地址：https://www.cnblogs.com/taohuaya/p/9638041.html
