JS运动

发布时间：2023-09-06 02:12责任编辑：郭大石关键词：暂无标签

新学的JS运动，和各位分享一下。

提到运动，肯定要对元素进行定位，通过更改它的left，top值来实现定位的目的，运动过程用定时器来实现。

基本步骤：

　　1.关闭上一个定时器（多次触发事件会开启多个定时器，会累加）

　　2.开启一个定时器

　　3.定义一个值作为运动的速度

　　4.判断定时器什么时候关闭，也就是终止条件

　　5.让元素怎样动

下面开始说几种常见的运动

1.匀速运动

速度是不变的。

var timer=null;
document.onclick = function () {
timer= setInterval(function(){

　　if(oBox.offsetLeft>=400){

　　　　clearInterval(timer);

　　}else{

　　　　 oBox.style.left = oBox.offsetLeft+speed+"px";

　　}

},30)
}
</script>

oBox会匀速向右运动400px后停止，建议终止条件写oBox.offsetLeft>=400，而不是oBox.offsetLeft==400，因为定时器每次加一个speed,不一定正好加到所给的终止值。

以下案例的布局是一样的，所以只写JS代码

2.减速运动

速度每次减减，加速度相同，所以是匀减速运动

3.匀加速运动（同理）

4.缓冲运动（样式改变）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 800px;
}

#border{
width: 1px;
height: 300px;
background: #000;
position: absolute;
left: 400px;
top: 0;
}
</style>
</head>
<body>
<div ></div>
<div ></div>
</body>
</html>

var oBox = document.getElementById("box");
var timer = null;

</script>

每次都把速度的值变小,但不是均匀的改变（跟减速运动最大不同），取整是为了让浏览器更好的计算，避免计算小数，以免出现误差。

封装一下。

obj,是对象，iTarget是目标值。例如：move(div,400)

5.上面的封装不完善，想改变一个元素的透明度就做不到。透明度是小数且没单位，还得做IE的兼容，下面是怎样更改透明度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#box{
width: 100px;
height: 100px;
background: red;
opacity: 1;
filter: alpha(opacity: 100);

}
</style>
</head>
<body>
<div ></div>
</body>
</html>
<script>
var oBox = document.getElementById("box");
var timer =null;
var alpha = 100;

document.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
var speed=(30-alpha)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(alpha==30){
clearInterval(timer);
}else{
alpha+=speed;
oBox.style.opacity=alpha/100;
oBox.style.filter="alpha(opacity:"+alpha+")";
}
},30);
}
</script>

6.考虑到透明度，于是再次封装。

这次先封装一个获取非行内元素

function getStyle(obj,attr){

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];

}

oBox.onmouseover = function(){
move(this,100,"opacity");
}

调用一下，没问题

7.多物体运动框架

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
div{
width: 100px;
height: 100px;
background: red;
opacity: 0.3;
filter: alpha(opacity: 30);
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}

function move(obj,iTarget,attr){
//obj.timer,定时器之间不影响
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//第一步判断attr是否为透明度
var iCur = 0;
if(attr == "opacity"){
iCur =parseInt(getStyle(obj,attr)*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}

//第二步算速度
var speed = (iTarget - iCur )/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

//第三步
if(iCur == iTarget){
clearInterval(obj.timer);
}else{
if(attr == "opacity"){
obj.style.opacity = (iCur+speed)/100;
obj.style.filter = "alpha(opacity:"+(iCur+speed)+")";
}else{
obj.style[attr] = iCur+speed+"px";
}

}

},30)
}

var aDiv = document.getElementsByTagName("div");

aDiv[0].onmouseover = function(){
move(this,300,"width")

}

aDiv[1].onmouseover = function(){
move(this,300,"height")
}

aDiv[2].onmouseover = function(){
move(this,100,"opacity")
}
</script>

当多物体的时候，只用一个timer定义定时器时，会影响下一个物体的运动，所以要用obj.timer,关闭的时候关闭自己的定时器，不影响其他定时器的执行

8.链式运动

给原来封装的函数加一个回调函数，解决

9.完美运动（让元素2个属性同时运动，链式运动只能一个执行完，再执行另一个）

JS运动

原文地址：https://www.cnblogs.com/lzn0330/p/9538903.html

JS运动

知识推荐