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

請問為什么沒有效果了？？不知都哪里出錯了。

<!DOCTYPE HTML>
<html>
<head>
?? ?<title>多物體動畫</title>
?? ?<meta charset="UTF-8">
?? ?<style type="text/css">
?? ??? ?*{
?? ??? ??? ?padding: 0px;
?? ??? ??? ?margin: 0px;
?? ??? ?}
?? ??? ?ul{
?? ??? ??? ?list-style: none;
?? ??? ?}
?? ??? ?ul li{
?? ??? ??? ?width: 130px;
?? ??? ??? ?height: 100px;
?? ??? ??? ?background:#F33;
?? ??? ??? ?margin-top:15px;
?? ??? ?}
?? ?</style>
?? ?<script type="text/javascript">
?? ??? ?window.onload=function(){
?? ??? ?//事件監聽
?? ??? ?var aLi = document.getElementsByTagName('li');?? ??? ??? ?
?? ??? ?for(var i=0;i<aLi.length;i++){?? ??? ??? ?
?? ??? ??? ?aLi[i].onmouseover = function (){
?? ??? ??? ??? ?move2(this,400);
?? ??? ??? ?}
?? ??? ??? ?aLi[i].onmouseout = function (){
?? ??? ??? ??? ?move2(this,130);
?? ??? ??? ?}
?? ??? ?? }?? ??? ?
?? ??? ?}
?? ??? ?//動畫函數
?? ??? ?? //var timer=null;
?? ??? ?? function move2(obj,Target){
?? ??? ? ??? ?clearInterval(obj.timer);
?? ??? ? ??? ?obj.timer = setInterval(function(){
?? ??? ? ??? ?var speed = (Target-obj.offsetWidth)/8;
?? ??? ? ??? ??? ?speed = speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ? ??? ??? ?if(obj.offsetWidth==Target){
?? ??? ? ??? ??? ??? ?clearInterval(obj.timer);//運動到指定位置后清除計時器
?? ??? ? ??? ??? ?}else{
?? ??? ? ??? ??? ??? ?obj.style.width = obj.offsetWidth+speed+'px';
?? ??? ? ??? ??? ?},30);
?? ??? ?? }?? ??? ??? ??? ?
?? ?</script>
</head>
<body>
?? ?<ul>
?? ??? ?<li><a href="#"></a></li>
?? ??? ?<li><a href="#"></a></li>
?? ??? ?<li><a href="#"></a></li>
?? ?</ul>
</body>
</html>

深呼吸_0

2015-09-06

源自：JS動畫效果 4-1

關注問題我要回答

916

操作

收起

2 回答

Y_du
2015-09-07

<!DOCTYPE?HTML>
<html>
<head>
????<title>多物體動畫</title>
????<meta?charset="UTF-8">
????<style?type="text/css">
????????*{
????????????padding:?0px;
????????????margin:?0px;
????????}
????????ul{
????????????list-style:?none;
????????}
????????ul?li{
????????????width:?130px;
????????????height:?100px;
????????????background:#F33;
????????????margin-top:15px;
????????}
????</style>
????<script?type="text/javascript">
????????window.onload=function(){
????????//事件監聽
????????var?aLi?=?document.getElementsByTagName('li');
????????for(var?i=0;?i?<?aLi.length;?i++){????????????
????????????aLi[i].onmouseover?=?function?(){
????????????????move2(this,?400);
????????????}
????????????aLi[i].onmouseout?=?function?(){
????????????????move2(this,?130);
????????????}
??????????}????????
????????}
????????//動畫函數
??????????//var?timer=null;
??????????function?move2(obj,Target){
??????????????clearInterval(obj.timer);
??????????????obj.timer?=?setInterval(function(){
??????????????????var?speed?=?(Target-obj.offsetWidth)/8;
??????????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
??????????????????if(obj.offsetWidth==Target){
??????????????????????clearInterval(obj.timer);//運動到指定位置后清除計時器
??????????????????}else{
??????????????????????obj.style.width?=?obj.offsetWidth+speed+'px';
??????????????????}
??????????????},?30)
??????????}??????????????
????</script>
</head>
<body>
????<ul>
????????<li><a?href="#"></a></li>
????????<li><a?href="#"></a></li>
????????<li><a?href="#"></a></li>
????</ul>
</body>
</html>

setInterval的函數沒有寫正確。時間設置在else上面了