<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style?type="text/css">
?*{padding:0;margin:0;}
????????ul,li{list-styleLnone;}
????????ul?li{
????????????width:200px;
?height:100px;
?line-height:100px;
?background:yellow;
?margin-bottom:20px;
?}
????</style>
????<script?>
?window.onload=function()//網(wǎng)頁(yè)剛打開(kāi)的就時(shí)候執(zhí)行函數(shù)
?{
???????????var?aLi=document.getElementById("li");
?for(var?i=0;i<aLi.length;i++)
???????????{
???????????????aLi[i].onmouseover=function()//鼠標(biāo)移上去的時(shí)候執(zhí)行函數(shù)function
?{
???????????????????startMove(this,400);//參數(shù)1?開(kāi)始運(yùn)動(dòng)到400這個(gè)位置
?}
???????????????aLi[i].onmouseover=function()
???????????????{
???????????????????startMove(this,200);//參數(shù)2?返回運(yùn)動(dòng)到200這個(gè)位置
?}
???????????}
????????}
????????var?timer?=?null;
?function?startMove(obj,iTarget)//前面有兩個(gè)參數(shù)，這里也要寫兩個(gè)參數(shù)
?{
???????????clearInterval(timer);//關(guān)閉定時(shí)器
?timer?=?setInterval(function()
???????????{???????????????????????????/*對(duì)象的可見(jiàn)寬度*/??????//即距離
?var?speed?=(iTarget-obj.offsetWidth)/8;//速度=(目標(biāo)值-東西的寬度)/時(shí)間
?speed?=?speed?>0?Math.ceil(speed):Math.floor(speed);
?//速度=速度>0那么向上取整：否則向下取整；
?if(obj.offsetWidth?==?iTarget)
???????????????{
???????????????????clearInterval(timer);
?}
???????????????else
?{
???????????????????obj.style.width?=?obj.offsetWidth?+?speed?+?'px';
?}
???????????},30)
???????}
????</script>
</head>
<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
</ul>
</body>
</html>
2018-11-06
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style type="text/css">
?*{padding:0;margin:0;}
? ? ? ? ul,li{list-style:none;}
? ? ? ? ul li{
? ? ? ? ? ? width:200px;
?height:100px;
?line-height:100px;
?background:yellow;
?margin-bottom:20px;
?}
? ? </style>
? ? <script >
?window.onload=function()//網(wǎng)頁(yè)剛打開(kāi)的就時(shí)候執(zhí)行函數(shù)
?{
? ? ? ? ? ?var aLi=document.getElementsByTagName("li");
?for(var i=0;i<aLi.length;i++)
? ? ? ? ? ?{
? ? ? ? ? ? aLi[i].timer=null;
? ? ? ? ? ? ? ?aLi[i].onmouseover=function()//鼠標(biāo)移上去的時(shí)候執(zhí)行函數(shù)function
?{
? ? ? ? ? ? ? ? ? ?startMove(this,400);//參數(shù)1 開(kāi)始運(yùn)動(dòng)到400這個(gè)位置
?}
? ? ? ? ? ? ? ?aLi[i].onmouseout=function()
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ?startMove(this,200);//參數(shù)2 返回運(yùn)動(dòng)到200這個(gè)位置
?}
? ? ? ? ? ?}
? ? ? ? }
? ? ? ? // var timer = null;
?function startMove(obj,iTarget)//前面有兩個(gè)參數(shù)，這里也要寫兩個(gè)參數(shù)
?{
? ? ? ? ? ?clearInterval(obj.timer);//關(guān)閉定時(shí)器
?obj.timer = setInterval(function()
? ? ? ? ? ?{? ? ? ? ? ? ? ? ? ? ? ? ? ?/*對(duì)象的可見(jiàn)寬度*/? ? ? //即距離
?var speed =(iTarget-obj.offsetWidth)/8;//速度=(目標(biāo)值-東西的寬度)/時(shí)間
?speed = speed >0?Math.ceil(speed):Math.floor(speed);
?//速度=速度>0那么向上取整：否則向下取整；
?if(obj.offsetWidth == iTarget)
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ?clearInterval(obj.timer);
?}
? ? ? ? ? ? ? ?else
?{
? ? ? ? ? ? ? ? ? ?obj.style.width = obj.offsetWidth + speed + 'px';
?}
? ? ? ? ? ?},30);
? ? ? ?}
? ? </script>
</head>
<body>
<ul>
? ? <li></li>
? ? <li></li>
? ? <li></li>
</ul>
</body>
</html>
2018-09-26
if判斷句應(yīng)該是2個(gè)==號(hào)
2018-07-04
2018-06-25
?var?aLi=document.getElementById("li");?這里li是標(biāo)簽名啊， ?應(yīng)該是var?aLi=document.getElementsByTagName('li');注意一下這個(gè)aLi是一個(gè)數(shù)組。 ?var?timer?=?null;還有這里，老師演示的時(shí)候不是給每個(gè)方塊都分配一個(gè)timer嗎？aLi[i].timer=null;相應(yīng)的startMove方法里面也要改一下。