<!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)頁剛打開的就時候執(zhí)行函數(shù)
?{
???????????var?aLi=document.getElementById("li");
?for(var?i=0;i<aLi.length;i++)
???????????{
???????????????aLi[i].onmouseover=function()//鼠標移上去的時候執(zhí)行函數(shù)function
?{
???????????????????startMove(this,400);//參數(shù)1?開始運動到400這個位置
?}
???????????????aLi[i].onmouseover=function()
???????????????{
???????????????????startMove(this,200);//參數(shù)2?返回運動到200這個位置
?}
???????????}
????????}
????????var?timer?=?null;
?function?startMove(obj,iTarget)//前面有兩個參數(shù)，這里也要寫兩個參數(shù)
?{
???????????clearInterval(timer);//關(guān)閉定時器
?timer?=?setInterval(function()
???????????{???????????????????????????/*對象的可見寬度*/??????//即距離
?var?speed?=(iTarget-obj.offsetWidth)/8;//速度=(目標值-東西的寬度)/時間
?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)頁剛打開的就時候執(zhí)行函數(shù)
?{
? ? ? ? ? ?var aLi=document.getElementsByTagName("li");
?for(var i=0;i<aLi.length;i++)
? ? ? ? ? ?{
? ? ? ? ? ? aLi[i].timer=null;
? ? ? ? ? ? ? ?aLi[i].onmouseover=function()//鼠標移上去的時候執(zhí)行函數(shù)function
?{
? ? ? ? ? ? ? ? ? ?startMove(this,400);//參數(shù)1 開始運動到400這個位置
?}
? ? ? ? ? ? ? ?aLi[i].onmouseout=function()
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ?startMove(this,200);//參數(shù)2 返回運動到200這個位置
?}
? ? ? ? ? ?}
? ? ? ? }
? ? ? ? // var timer = null;
?function startMove(obj,iTarget)//前面有兩個參數(shù)，這里也要寫兩個參數(shù)
?{
? ? ? ? ? ?clearInterval(obj.timer);//關(guān)閉定時器
?obj.timer = setInterval(function()
? ? ? ? ? ?{? ? ? ? ? ? ? ? ? ? ? ? ? ?/*對象的可見寬度*/? ? ? //即距離
?var speed =(iTarget-obj.offsetWidth)/8;//速度=(目標值-東西的寬度)/時間
?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個==號
2018-07-04
2018-06-25
?var?aLi=document.getElementById("li");?這里li是標簽名啊， ?應(yīng)該是var?aLi=document.getElementsByTagName('li');注意一下這個aLi是一個數(shù)組。 ?var?timer?=?null;還有這里，老師演示的時候不是給每個方塊都分配一個timer嗎？aLi[i].timer=null;相應(yīng)的startMove方法里面也要改一下。