請(qǐng)問(wèn)我的代碼錯(cuò)誤哪里！非常感謝！
<!doctype html>
<html>
?<head>
? ?<title>多物體運(yùn)動(dòng)動(dòng)畫(huà)</title>
? ?<meta charset="utf-8">
? ?<style>
? ?*{margin:0;padding: 0px;color: #FFF}
? ?ul,li{list-style: none}
? ?ul li{background: yellow;width: 200px;height: 100px;margin-bottom: 20px}
? ?</style>
? ?<script type="text/javascript">
? ?window.onload=function(){
? ? ? var lis=document.getElementsByTagName('li');
? ? ? for(var i=0;i<lis.length;i++){
? ? ? ? ?lis[i].onmouseover=function(){
? ? ? ? ? ? startMove(this,400)
? ? ? ? ?}
? ? ? ? ?lis[i].onmouseout=function(){
? ? ? ? ? ? startMove(this,200)
? ? ? ? ?}
? ? ? }
? ?}
? ?var timer=null;
? ?function startMove(obj,iTarget){
? ? ? clearInterval(timer);
? ? ? timer=(function(){
? ? ? ? ?var speed=(iTarget-obj.offsetWidth)/8;
? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? ?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>
</div>
</body>
</html>
2016-08-06
首先你的
?
??function startMove(obj,iTarget){
? ? ? clearInterval(timer);
? ? ? timer=(function(){
? ? ? ? ?var speed=(iTarget-obj.offsetWidth)/8;
? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? ?if(obj.offsetWidth==iTarget){
? ? ? ? ? ? clearInterval(timer);
? ? ? ? ?}
? ? ? ? ?else{
? ? ? ? ? ? obj.style.width=obj.offsetWidth+speed+'px';
? ? ? ? ?}
? ? ? },30)
? ?}
這一段，你的setInterval沒(méi)寫(xiě)，而且要注意需要給每一個(gè)obj定義一個(gè)定時(shí)器，所以應(yīng)該寫(xiě)成obj.timer=setInterval(function(){},30)，兩個(gè)clearInterval(timer);也應(yīng)該寫(xiě)成clearInterval(obj.timer);
另外在你的for循環(huán)里面你沒(méi)給每一個(gè)子標(biāo)簽定義一個(gè)定時(shí)器，應(yīng)該加一行
for(var i=0;i<lis.length;i++){
? ? ? ? ?lis[i].timer=null;(注意這個(gè)地方timer是給lis[i]的一個(gè)屬性，所以不需要定義成變量，不用在前面加 var)
? ? ? ? ?lis[i].onmouseover=function(){
? ? ? ? ? ? startMove(this,400)
? ? ? ? ?}
? ? ? ? ?lis[i].onmouseout=function(){
? ? ? ? ? ? startMove(this,200)
? ? ? ? ?}
? ? ? }
重新回答一次，這里面下劃線的是錯(cuò)誤代碼，粗體是正確代碼，你自己對(duì)比看看
2016-08-06
首先你的
?
??function startMove(obj,iTarget){
? ? ? clearInterval(timer);
? ? ? timer=(function(){
? ? ? ? ?var speed=(iTarget-obj.offsetWidth)/8;
? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? ?if(obj.offsetWidth==iTarget){
? ? ? ? ? ? clearInterval(timer);
? ? ? ? ?}
? ? ? ? ?else{
? ? ? ? ? ? obj.style.width=obj.offsetWidth+speed+'px';
? ? ? ? ?}
? ? ? },30)
? ?}
這一段，你的setInterval沒(méi)寫(xiě)，而且要注意需要給每一個(gè)obj定義一個(gè)定時(shí)器，所以應(yīng)該寫(xiě)成obj.timer=setInterval(function(){},30)，兩個(gè)clearInterval(timer);也應(yīng)該寫(xiě)成clearInterval(obj.timer);
另外在你的for循環(huán)里面你沒(méi)給每一個(gè)子標(biāo)簽定義一個(gè)定時(shí)器，應(yīng)該加一行
or(var i=0;i<lis.length;i++){
? ? ? ? ?lis[i].timer=null;(注意這個(gè)地方timer是給lis[i]的一個(gè)屬性，所以不需要定義成變量，不用在前面加 var)
? ? ? ? ?lis[i].onmouseover=function(){
? ? ? ? ? ? startMove(this,400)
? ? ? ? ?}
? ? ? ? ?lis[i].onmouseout=function(){
? ? ? ? ? ? startMove(this,200)
? ? ? ? ?}
? ? ? }