請問我的代碼錯誤哪里！非常感謝！
<!doctype html>
<html>
?<head>
? ?<title>多物體運動動畫</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沒寫，而且要注意需要給每一個obj定義一個定時器，所以應該寫成obj.timer=setInterval(function(){},30)，兩個clearInterval(timer);也應該寫成clearInterval(obj.timer);
另外在你的for循環里面你沒給每一個子標簽定義一個定時器，應該加一行
for(var i=0;i<lis.length;i++){
? ? ? ? ?lis[i].timer=null;(注意這個地方timer是給lis[i]的一個屬性，所以不需要定義成變量，不用在前面加 var)
? ? ? ? ?lis[i].onmouseover=function(){
? ? ? ? ? ? startMove(this,400)
? ? ? ? ?}
? ? ? ? ?lis[i].onmouseout=function(){
? ? ? ? ? ? startMove(this,200)
? ? ? ? ?}
? ? ? }
重新回答一次，這里面下劃線的是錯誤代碼，粗體是正確代碼，你自己對比看看
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沒寫，而且要注意需要給每一個obj定義一個定時器，所以應該寫成obj.timer=setInterval(function(){},30)，兩個clearInterval(timer);也應該寫成clearInterval(obj.timer);
另外在你的for循環里面你沒給每一個子標簽定義一個定時器，應該加一行
or(var i=0;i<lis.length;i++){
? ? ? ? ?lis[i].timer=null;(注意這個地方timer是給lis[i]的一個屬性，所以不需要定義成變量，不用在前面加 var)
? ? ? ? ?lis[i].onmouseover=function(){
? ? ? ? ? ? startMove(this,400)
? ? ? ? ?}
? ? ? ? ?lis[i].onmouseout=function(){
? ? ? ? ? ? startMove(this,200)
? ? ? ? ?}
? ? ? }