                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

為什么給兩個li 都調(diào)用了函數(shù)，卻只有第一個起了作用，且沒發(fā)現(xiàn)對象的timer屬性在哪里初始化？？？？？

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ?*{
?? ??? ??? ?margin: 0;
?? ??? ??? ?padding: 0;
?? ??? ?}
?? ??? ?ul{
?? ??? ?list-style: none;
?? ??? ?}
?? ??? ul li{
?? ?? ??? ?height: 100px;
?? ?? ??? ?width: 200px;
?? ?? ??? ?background: yellow;
?? ?? ??? ?margin-bottom: 20px;
?? ?? ??? ?border:2px solid black;
?? ?? ??? ?opacity: 0.3;
?? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?window.onload=function(){
?? ??? ??? ?var li1=document.getElementById("li1");
?? ??? ???? li1.timer=null;
?? ??? ??? ?var li2=document.getElementById("li2");?? ?
?? ??? ???? li2.timer=null;
?? ??? ??? ?li1.onmouseover=function(){
?? ??? ??? ??? ?startMove(this,'opacity',100);
?? ??? ??? ?}
?? ??? ??? ?li1.onmouseout=function(){
?? ??? ??? ??? ?startMove(this,'opacity',30);
?? ??? ??? ?}
?? ??? ??? ?li2.onmouseover=function(){
?? ??? ??? ??? ?startMove(this,'width',400);
?? ??? ??? ?}
?? ??? ??? ?li2.onmouseout=function(){
?? ??? ??? ??? ?startMove(this,'width',200);
?? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?function startMove(obj,attr,target){
?? ??? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ?
?? ??? ??? ??? ?obj.timer=setInterval(function(){
?? ??? ??? ??? ?var curw=0;
?? ??? ??? ??? ?if(attr='opacity'){
?? ??? ??? ??? ? curw=Math.round(parseFloat(getStyle(obj,attr))*100);?? ?
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ? curw=parseInt(getStyle(obj,attr));?? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?var speed=(target-curw)/8;
?? ??? ??? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ??? ??? ?if(curw==target){
?? ??? ??? ??? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ??? ?if(attr='opacity'){
?? ??? ??? ??? ??? ??? ??? ?obj.style.filter='alpah(opacity:'+curw+speed+')';
?? ??? ??? ??? ??? ??? ??? ?obj.style.opacity=(curw+speed)/100;
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ?obj.style[attr]=curw+speed+'px';
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?},30);
?? ??? ??? ?}
?? ??? ??? ?function getStyle(obj,attr){
?? ??? ??? ?if(obj.currentStyle){
?? ??? ??? ??? ?return obj.currentStyle[attr];
?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ??? ?return getComputedStyle(obj,false)[attr];
?? ??? ??? ?}
?? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<ul>
?? ??? ??? ?<li id="li1"></li>
?? ??? ??? ?<li id="li2"></li>
?? ??? ?</ul>
?? ?</body>
</html>