                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

求大神幫忙，為毛我的沒有反應

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{margin:0;
? padding:0;}
ul,li{list-style:none;}
ul li{width:200px;
?? height:100px;
?? background:yellow;
?? margin-bottom:20px;
?}
</style>
<script>
window.onload=function(){
?var oli=document.getElementsByTagName('li');
?for(var i=0;i=oli.length;i++){
??oli[i].onmouseover=function(){
???startMove(this,400);
???};
??oli[i].onmouseout=function(){
???startMove(this,200);
???};
??}
?}
var timer=null;

QAQQQQ

2015-07-25

源自：JS動畫效果 4-1

關注問題我要回答

1059

操作

收起

3 回答

前端貓人
2015-07-26

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標題文檔</title>
<style>
*{margin:0;
??padding:0;}
ul,li{list-style:none;}
ul?li{width:200px;
???height:100px;
???background:yellow;
???margin-bottom:20px;
?}
</style>
<script>
window.onload=function(){
?var?oli=document.getElementsByTagName('li');
?for(var?i=0;i<oli.length;i++){
??oli[i].timer=null;//給每一個li都設置一個定時器，有點添加屬性的意思
??oli[i].onmouseover=function(){
???startMove(this,400);
???};
??oli[i].onmouseout=function(){
???startMove(this,200);
???};
??}
?}
//var?timer=null;
function?startMove(obj,itarget){
??//document.write("hshs");
??clearInterval(obj.timer);//防止定時器重復觸發
??obj.timer=setInterval(function(){
??var?speed=(itarget-obj.offsetWidth)/8;
??speed=speed>0?Math.ceil(speed):Math.floor(speed);
??if(obj.offsetWidth==itarget){
????clearInterval(obj.timer);//這里也需要改為obj.timer
????}else{
?????obj.style.width=obj.offsetWidth+speed+'px';
?????}
???},30)
??
??
??}
</script>
</head>
<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
</ul>
</body>
</html>

你看我給你注釋的地方，你的都有問題，我已經幫你改過來了~~~~~~~~~(*^__^*) 嘻嘻……