- 實(shí)例1：左右按鈕點(diǎn)擊運(yùn)動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右按鈕點(diǎn)擊運(yùn)動</title>
<style>
*{
margin: 0;
padding: 0;
}
button{
margin: 5px;
width: 100px;
height: 30px;
line-height: 30px;
cursor: pointer;
}
#but{
width:230px;
height: 50px;
margin: 0 auto;
}
#div1{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
color: blue;
border-radius: 50%;
background-color: red;
position: absolute;
left: 500px;
top: 100px;
}
.div2{
width: 10px;
height: 500px;
position: absolute;
top: 50px;
background-color: blue;
}
#div2{
left: 240px;
}
#div3{
left: 1250px;
}
</style>
</head>
<body>
<div id="but"><button>向左</button><button>向右</button></div>
<div id="div1">太陽</div>
<div class="div2" id="div2"></div>
<div class="div2" id="div3"></div>
<script>
var oDiv=document.getElementById("div1");
var aBtn=document.getElementsByTagName("button");
aBtn[0].onclick=function () {
moveBat(250);
};
aBtn[1].onclick=function () {
moveBat(1150);
};
function moveBat(target) {
_moveBat();//執(zhí)行一次；
function _moveBat(){//添加函數(shù)撵术，利于優(yōu)化
var cur=oDiv.offsetLeft;
if(cur>target){
if(cur-5<=target){//提前加減步長進(jìn)行比較背率，如果滿足條件就設(shè)置目標(biāo)值；
oDiv.style.left=target+"px";
return;
}
cur-=5;
}else{
if(cur+5>=target){
oDiv.style.left=target+"px";
return;
}
cur+=5;
}
oDiv.style.left=cur+"px";
clearTimeout(oDiv.timer);//執(zhí)行前先關(guān)閉定時(shí)器嫩与；
oDiv.timer=setTimeout(_moveBat,30);//將timer設(shè)置在元素的自定義屬性上寝姿，避免全局變量；
}
/* oDiv.timer=setTimeout(function () {//設(shè)置匿名函數(shù)后划滋，會重復(fù)新建私有作用域饵筑，不能釋放，不利于優(yōu)化
moveBat(target);
},30);*/
}
//1 邊界值的判斷处坪，預(yù)判是否到達(dá)邊界值根资；
//2 定時(shí)器的timer,設(shè)置在元素的自定義屬性上架专，避免全局變量
//3 兩個(gè)點(diǎn)擊事件執(zhí)行一個(gè)定時(shí)器時(shí)會出問題，所以需要在執(zhí)行定時(shí)器之前玄帕，關(guān)閉定時(shí)器部脚；
//4 定時(shí)器中新建匿名函數(shù)的優(yōu)化問題；
</script>
</body>
</html>
- 運(yùn)動庫linear函數(shù)封裝
- 目的：獲取運(yùn)動元素的實(shí)時(shí)位置
- 參數(shù)：
- b:begin 運(yùn)動起始位置
- c:change 還要走多遠(yuǎn)
- d:duration 走完剩下的路程需要的總時(shí)間
- t:time 代表走了多少時(shí)間
- 變量：time值為可變值裤纹，不斷地累加委刘，然后計(jì)算出實(shí)時(shí)位置；配合定時(shí)器使用服傍；
- 返回值：返回實(shí)時(shí)位置值钱雷；
<script>
function linear(c,d,t,b) {
return c/d*t+b;
}
</script>
<script>
function linear(c,d,t,b) {
return c/d*t+b;
}
var oDiv1=document.getElementById("div1");//運(yùn)動元素
var oDiv2=document.getElementById("div2");//目標(biāo)位置元素
//目標(biāo)值target需要確定
var target=oDiv2.offsetLeft-oDiv1.offsetWidth-oDiv2.offsetWidth;//減去運(yùn)動元素的寬度和自身的寬度；
var b=oDiv1.offsetLeft;
var c=target-b;
var d=1000;
var t=0;
oDiv1.timer=setInterval(function () {
t+=10;//time為變量吹零，不斷累加罩抗；
//邊界點(diǎn)判斷
if(t>d){
oDiv1.style.left=target+"px";
clearInterval(oDiv1.timer);
}
var curLeft=linear(c,d,t,b);
oDiv1.style.left=curLeft+"px";
},10)
</script>
- 實(shí)例：一個(gè)物體的多運(yùn)動
- 目的：實(shí)現(xiàn)一個(gè)物體在x,y兩個(gè)方向上的同時(shí)勻速運(yùn)動；
- 思路：
- 分別求出物體運(yùn)動在x,y方向上的起始位置灿椅，目標(biāo)位置套蒂，算出各自方向上的總路程；
- 設(shè)定總時(shí)間duration茫蛹；
- 起始時(shí)間為0,即time初始賦值為0操刀；
- 設(shè)置定時(shí)器：1）進(jìn)行time變量的累加，最好跟定時(shí)器的執(zhí)行時(shí)間相同婴洼；2）邊界點(diǎn)判斷（設(shè)置目標(biāo)位置骨坑、停止定時(shí)器、阻斷程序執(zhí)行）柬采；3）利用linear方法獲取x,y方向上的實(shí)時(shí)位置欢唾；4）設(shè)置實(shí)時(shí)位置；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一個(gè)物體的多運(yùn)動</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
color: blue;
border-radius: 50%;
background-color: red;
position: absolute;
left: 300px;
top: 30px;
}
.div2{
width: 10px;
height: 500px;
position: absolute;
top: 30px;
left: 1050px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">物體</div>
<div class="div2" id="div2"></div>
<script src="utils.js"></script>
<script>
function linear(c,d,t,b) {
return c/d*t+b;
}
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var targetLeft=oDiv2.offsetLeft-oDiv1.offsetWidth,targetTop=oDiv2.offsetHeight+oDiv2.offsetTop-oDiv1.offsetHeight;
var beginLeft=oDiv1.offsetLeft,beginTop=oDiv1.offsetTop;
var changLeft=targetLeft-beginLeft,changTop=targetTop-beginTop;
var duration=1000;
var time=0;
var timer=setInterval(function () {
//1 變量累加
time+=10;
//2 邊界點(diǎn)判斷
if(time>=duration){
//設(shè)置目標(biāo)值
utils.css(oDiv1,{
left:targetLeft,
top:targetTop
});
//停止定時(shí)器
clearInterval(timer);
//阻斷程序執(zhí)行
return ;
}
//3 獲取當(dāng)前位置
var curLeft=linear(changLeft,duration,time,beginLeft);
var curTop=linear(changTop,duration,time,beginTop);
//4 設(shè)置當(dāng)前位置
utils.css(oDiv1,{
left:curLeft,
top:curTop
});
},10);
</script>
</body>
</html>
- 實(shí)例：封裝方法粉捻，實(shí)現(xiàn)物體的多運(yùn)動庫
- 參數(shù)： ele：元素礁遣，target:目標(biāo)值，對象肩刃，duration:運(yùn)動總時(shí)間
- 注意點(diǎn)：
- 工具庫的引用祟霍，需要按照引用順序調(diào)用；
- 在工具庫中利用自執(zhí)行函數(shù)封裝的方法盈包，需要設(shè)置window沸呐，將其設(shè)置成全局變量，這樣才能在全局引用续语；
- 工具庫代碼：
(function () {
var gbEffect={
Linear:function(c,d,t,b){
return c/d*t+b;
}
};
function move(ele,target,duration){
//ele:元素垂谢，target:目標(biāo)值，對象疮茄，duration:時(shí)間
duration=duration || 2000;
var begin={},change={};
for(var attr in target){
begin[attr]=utils.css(ele,attr);
change[attr]=target[attr]-begin[attr];
}
var time=0;
//定時(shí)器
var timer=setInterval(function () {
//變量累加
time+=10;
//邊界點(diǎn)判斷
if(time>=duration){
//設(shè)置邊界值
console.log(1)
utils.css(ele,target);
//停止定時(shí)器
clearInterval(timer);
//阻斷程序執(zhí)行
return ;
}
//獲取實(shí)時(shí)位置
for(var attr in change){
var linear=gbEffect.Linear(change[attr],duration,time,begin[attr]);
//設(shè)置實(shí)時(shí)位置
utils.css(ele,attr,linear);
}
},10)
}
//自執(zhí)行函數(shù)中與外界無聯(lián)系滥朱，利用window設(shè)置為全局
window.animate=move;
})();
<body>
<div id="div1">物體</div>
<div id="div2"></div>
<script src="utils.js"></script>
<script src="move.js"></script>
<script>
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
animate(oDiv1,{
left:oDiv2.offsetLeft-oDiv1.offsetWidth,
top:oDiv2.offsetTop+oDiv2.offsetHeight-oDiv1.offsetHeight,
opacity:0.8
},2000)
</script>
</body>
