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

obj is defind 老是報錯！？

<!DOCTYPE html>
<html>
<head>
?? ?<title>多物體運動</title>
?? ?<meta charset="utf-8"/>
?? ?<style type="text/css">
?? ?? ul,li{list-style: none;}
?? ?? ul li{width: 200px;height: 100px;background-color: yellow;margin-bottom: 20px;border: 4px solid #000;filter:alpha(opaciy:30);opacity: 0.3?? ? }
?? ?</style>
?? ?<script type="text/javascript">
?? ?window.onload = function? () {?? ??? ?
?? ??? ?var li1=document.getElementById("li1");
?? ??? ?
?? ??? ?li1.onmouseover=function(){
?? ??? ??? ?startMove(this,'opacity',100);
?? ??? ?}
?? ??? ?li1.onmouseout=function(){
?? ??? ??? ?startMove(this,'opacity',30);
?? ??? ?}?? ??? ?
?? ?}?? ?
?? ?function getStyle(obj,attr){
?? ??? ?if(obj.currentStyle){
?? ??? ??? ?return obj.currentStyle[attr];
?? ??? ?}
?? ??? ?else{
?? ??? ??? ?return getComputedStyle(obj,false)[attr];
?? ??? ?}

?? ?}
?? ?// var timer = null;
?? ?var alpha = 30;

?? ?function startMove(obj,attr,iTarget){
?? ??? ?clearInterval(obj.timer);
?? ??? ?obj.timer=setInterval(function(){
?? ??? ??? ?var icur=0;
?? ??? ??? ?if (attr=="opacity") {
?? ??? ??? ??? ?icur=parseFloat(getStyle(obj.attr))*100;

?? ??? ??? ?} else{
?? ??? ??? ??? ?icur = parseInt(getStyle(obj,attr));

?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?var speed = (iTarget-icur)/8;
?? ??? ??? ?speed = speed>0?Math.ceil(speed):Math.floor(speed);// 緩沖運動
?? ??? ??? ?if(icur==iTarget) {
?? ??? ??? ??? ?clearInterval(obj.timer);

?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ??? ?if (attr=="opacity") {
?? ??? ??? ??? ??? ?obj.style.filter="alpha(opacity:"+(icur+speed)+")";// 針對IE瀏覽器
?? ??? ??? ??? ??? ?obj.style.opacity=(icur+speed)/100;//針對火狐等其他主流瀏覽器
?? ??? ??? ??? ?} else{
?? ??? ??? ??? ??? ?obj.style[attr]=icur+speed+"px";// 不加中括號不能運行
?? ??? ??? ??? ?}?? ??? ??? ??? ?
?? ??? ??? ?}

?? ??? ?},30);
?? ?}?? ??? ?
?? ?</script>
</head>
<body>
? <ul>
?? ?<li id="li1"></li>?? ?
? </ul>
</body>
</html>