1.勻速運(yùn)動(dòng)（速度不變）
運(yùn)動(dòng)的簡單實(shí)現(xiàn)
運(yùn)動(dòng): 顧名思義 就是讓物體動(dòng)起來!到達(dá)你想要的效果 或者說想要的位置癣朗。
我想讓一個(gè)方塊（DIV）動(dòng)起來 并且到達(dá)一個(gè)指定的位置 台夺。怎么讓一個(gè)DIV 動(dòng)起來 這時(shí)候就用到setInterval（）函數(shù) 也就是定時(shí)器袒啼。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div {width:100px; height:100px; position:absolute; background:yellow; left:0; top:50px;}
</style>
<script>
function startMove()
{
var Div=document.getElementById('div');
setInterval(function (){
Div.style.left=Div.offsetLeft+10+'px';
}, 30);
}
</script>
</head>
<body>
<input type="button" value="開始運(yùn)動(dòng)" onclick="startMove()">
<div id="div"></div>
</body>
</html>
但是運(yùn)行起來 你發(fā)現(xiàn)他并不會(huì)停 因?yàn)楸緛砭蜎]有讓他停想要讓div停 只要關(guān)掉定時(shí)器就行 但是前提是你要讓div停在你想要的位置上比如說 當(dāng)div運(yùn)動(dòng)到300px的時(shí)候在停下
var timer=null;
function startMove()
{
var Div=document.getElementById('div');
timer=setInterval(function (){
if(Div.offsetLeft>=300)//判斷運(yùn)動(dòng)是否到達(dá)終點(diǎn)
{
clearInterval(timer);//關(guān)掉定時(shí)器
}
Div.style.left=Div.offsetLeft+10+'px';
}, 30);
}
這里我們div的offsetleft大于等于300而不是等于300 是因?yàn)?當(dāng)速度不正好是你運(yùn)動(dòng)距離的整除數(shù) 還是不會(huì)停止 避免這類情況發(fā)生
好吧看似這個(gè)簡單的div運(yùn)動(dòng)應(yīng)該沒問題了但是 當(dāng)物體已經(jīng)運(yùn)動(dòng)到終點(diǎn)時(shí) 再點(diǎn)擊按鈕開始運(yùn)動(dòng) 你會(huì)發(fā)現(xiàn)div還是會(huì)動(dòng)一下在停止 這又是為什么呢
Div.style.left=Div.offsetLeft+10+'px';
讓我們來看看這段代碼的意思讓物體以10px的速度在運(yùn)動(dòng) 所以 這應(yīng)該是物體沒到達(dá)終點(diǎn)之前 應(yīng)該做的事情吧
clearInterval(timer);//關(guān)掉定時(shí)器
而關(guān)掉定時(shí)器是到達(dá)終點(diǎn)做的事情 好像有點(diǎn)自相矛盾了呢 這里我們得加個(gè)else 語句意思就是 如果到達(dá)終點(diǎn) 關(guān)掉定時(shí)器 沒有
則繼續(xù)運(yùn)動(dòng)瞳遍。
var timer=null;
function startMove()
{
var Div=document.getElementById('div');
timer=setInterval(function (){
if(Div.offsetLeft>=300)//判斷運(yùn)動(dòng)是否到達(dá)終點(diǎn)
{
clearInterval(timer);//關(guān)掉定時(shí)器
}else{
Div.style.left=Div.offsetLeft+10+'px';
}
}, 30);
}
這總歸沒問題了吧 好吧手賤的我 物體（div）還沒到達(dá)終點(diǎn)時(shí) 又多點(diǎn)了幾下開始運(yùn)動(dòng)拓萌，驚奇的發(fā)現(xiàn)速度變快了 這是為什么呢
其實(shí)呢 還是定時(shí)器 的問題的 因?yàn)槟氵€沒到終點(diǎn)時(shí)沒點(diǎn)一下 就會(huì)產(chǎn)生一個(gè)定時(shí)器 速度 自然而然快了 就好比做項(xiàng)目一個(gè)人做又累又慢 哎 公司又招了2個(gè)前端 工作量明顯減少不少碍沐。
解決辦法的就是在開啟定時(shí)器之前關(guān)閉所有定時(shí)器
clearInterval(timer);
總結(jié)一下 讓物體運(yùn)動(dòng)動(dòng)起來的問題
- 怎么停止（關(guān)閉定時(shí)器）
- 到達(dá)終點(diǎn)再次點(diǎn)擊還會(huì)運(yùn)動(dòng)
- 沒到達(dá)終點(diǎn)再次點(diǎn)擊速度加快
實(shí)現(xiàn)分享到運(yùn)動(dòng)的例子
如圖一樣的效果:
其實(shí)好吧我在好多博客網(wǎng)站看到過辙浑。
如何實(shí)現(xiàn)呢 把復(fù)雜的東西先簡單化 當(dāng)鼠標(biāo)移動(dòng)到分享到按鈕時(shí)div的offset運(yùn)動(dòng)到指定位置
鼠標(biāo)移開div的offset又回到初始位置
起初我會(huì)這么寫
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>分享到</title>
<style>
#div {width:100px; height:200px; background:#CCC; position:absolute; left:-100px;}
#div span {width:20px; height:60px; line-height:20px; text-align:center; left:100px; top:70px; background:yellow; position:absolute;}
</style>
<script>
window.onload=function ()
{
var Div=document.getElementById('div');
Div.onmouseover=function ()
{
startMove();
}
Div.onmouseout=function ()
{
startMove2();
}
}
var timer=null;
function startMove()
{
var Div=document.getElementById('div');
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=10;
if(Div.offsetLeft==0)
{
clearInterval(timer);
}
else
{
Div.style.left=Div.offsetLeft+iSpeed+'px';
}
}, 30);
}
function startMove2()
{
var Div=document.getElementById('div');
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=-10;
if(Div.offsetLeft==-100)
{
clearInterval(timer);
}
else
{
Div.style.left=Div.offsetLeft+iSpeed+'px';
}
}, 30);
}
</script>
</head>
<body>
<div id="div">
<span>分享到</span>
</div>
</body>
</html>
好吧看起來沒問題效果也實(shí)現(xiàn)但是代碼有點(diǎn)過多 需要優(yōu)化
如何解決這個(gè)問題
startMove()和startMove2()函數(shù) 根本上就是兩個(gè)基本上一樣的函數(shù)
不同的是終點(diǎn)值 所以需要合并一下 我們只要把終點(diǎn)值當(dāng)參數(shù)傳遞
就可以了 javascript代碼：
window.onload=function ()
{
var Div=document.getElementById('div');
Div.onmouseover=function ()
{
startMove(0);
}
Div.onmouseout=function ()
{
startMove(-100);
}
}
var timer=null;
function startMove(iTarget)
{
var Div=document.getElementById('div');
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=0;
if(Div.offsetLeft<iTarget) //物體offsetleft值沒到達(dá)終點(diǎn)值
{
iSpeed=10; //速度為正
}else
{
iSpeed=-10; //否則速度為負(fù)
}
if(Div.offsetLeft==iTarget)
{
clearInterval(timer);
}else
{
Div.style.left=Div.offsetLeft+iSpeed+'px';
}
}, 30);
}
2.緩沖運(yùn)動(dòng)
原理：速度有快到慢激涤， 當(dāng)?shù)竭_(dá)目標(biāo)點(diǎn)時(shí) 運(yùn)動(dòng)停止。也就是說速度是由距離決定的
物體與目標(biāo)點(diǎn)距離越大，速度越大 物體與目標(biāo)點(diǎn)距離越小倦踢，速度越小送滞。
速度公式：（目標(biāo)值-物體當(dāng)前距離）/縮放系數(shù)
javascript代碼
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=(iTarget-oDiv.offsetLeft)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //速度取整 如果不是整數(shù) 到達(dá)目標(biāo)點(diǎn)就會(huì)有誤差
if(oDiv.offsetLeft==iTarget)//是否到達(dá)終點(diǎn)
{
clearInterval(timer); //到達(dá)終點(diǎn)
}else
{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//到達(dá)之前
}
document.title=oDiv.offsetLeft+',speed='+iSpeed;
}, 30);
}
3.多物體同時(shí)體運(yùn)動(dòng)
多物體同時(shí)運(yùn)動(dòng)的問題是，需要在在每個(gè)物體的加個(gè)定時(shí)器 不然當(dāng)一個(gè)物體運(yùn)動(dòng)還沒有結(jié)束其他物體繼續(xù)運(yùn)動(dòng) 就會(huì)卡在那 這是共用一個(gè)定時(shí)器的后果辱挥。因?yàn)槭嵌鄠€(gè)物體 所以我們得給運(yùn)動(dòng)函數(shù) 加個(gè)物體（obj）參數(shù)犁嗅。
//多個(gè)DIV 變寬
window.onload=function ()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
for(i=0;i<aDiv.length;i++)
{
aDiv[i].timer=null;
aDiv[i].onmouseover=function ()
{
startMove(this, 300 ); //當(dāng)前鼠標(biāo)移入的物體
}
aDiv[i].onmouseout=function ()
{
startMove(this, 100);
}
}
}
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var iSpeed=(iTarget-obj.offsetWidth)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.offsetWidth==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style.width=obj.offsetWidth+iSpeed+'px';
}
}, 30)
}
