DOM高级:运动原理->匀速运动->加减速运动->缓冲运动

运动原理

运动原理:javaScript实现运动的原理,就是通过定时器不断改
变元素的位置,直至达到目标点后停止活动。通常,要让元素动
起来,我们会通过改变元素的left 和top值来改变元素的相对位
置。

方法

1、运动的物体使用绝对定位
2、通过改变定位物体的属性(right/left/top/bottom)值来使
物体移动,如:向右或者向左移动可以使用offsetleft
(offsetright)来控制左右移动

步骤

1、开始运动前清除已有定时器。(因为,连续点击按钮,
物体会运动越来越快,造成运动混乱);
2、开启定时器,计算速度;
3、把运动和停止隔开(if/else),判断停止条件,执行运动

案列 匀速运动

<style>
#box{width="100px";
height="100px";
background="red";
position:absolute}
style>
<body>
<button onclick="startMove()" id="btn">开始button>
<div id="box">div>
body>
<script>
var btn=document.getElementById("btn");
var box=document.querySolector("div");
let time=null;
function startMove(){
clearInterval(time);
setInterval(function(){
//让盒子一次向右移动5px
box.style.left=box.offsetleft+5+"px";
//做判断,移动到什么位置的时候停止运动
if(box.offsetleft>300){
box.style.left="300px"
//到达目的时清除定时器
clearInterval(time)
}
},50)
}
//函数开头就清除定时器的原因是,第一次点击是+5“px”
//第二次点击就是在+5px的基础上在加5px,易造成运动混乱。
script>

匀速运动的优化:往返运动

<style>
div{width="200px";height="200px";
position=absolute;background="red"}

style>
<button onclick="move(300)">向左button>
<button onclick="move(0)">向右button>
<div>div>
<script>
let div =document.querySelector("div");
let time=null;
function move(obj){
//同样事件函数的第一步是清除定时器
clearInterval(time)
time=setInterval(function(){
//判断目标位置,div应往左还是右跑
let speed=obj-div.offsetleft>0?5:-5
 div.style.left=div.offsetleft+speed+"px";
 //判断一下到目的地后停止计时器
 if(div.style.left==0||div.style==300){
 clearInterval(time)}
},50)
}


script>

匀速透明运动

<style>

div{width="200px";height="200px"position="absolute"
opacity=0.3;}
style>
<body>


<button onmouseover="move(0.1)" onmouseout=
"move(1)">button>
<div>div>

body>
<script>
//封装一个获取非行间样式的函数,obj是对象,attr是值
function getstyle(ojb,attr){
if(job.currentStyle){
return job.currentStyle[attr]}
}else{
//针对非IE浏览器
return job.getComputedStyle(obj,false)[attr]
}
let div=document.querySelector("div")
let ys=getstyle(div,"opacity");//值的返回为字符串
let time=nullfunction(target){
time=setInterval(function(){
//设置一个速度(透明度值)
let speed=ys-target<0?0.01:-0.01
//因为获取的非行间样式返回是字符串,所以将转为数字
div.style.opacity=Number(getstyle(div,"opacity"))
+speed
//加个判断,什么时候该停止计时器
if(div.style.opacity==0||div.style.opacity==1){
clearInterval(time)
}
},50)
}

script>

缓冲运动与封装

原理:let speed=(mubiao-obj.offsetLeft)10;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
   

过程、步骤

<style>
div{ height: 100px;
     width: 100px;
     background: red;
     position: absolute;
     top: 200px;
     left: 0px;
    }
style>
    <body>

你可能感兴趣的:(html)