                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

代码是照着写的啊，但是透明度不能变到100，onmouseout的动画也不对，亲可以帮我看下吗？谢谢啦！

<style type="text/css">
*{
	margin:0;
	padding:0;}
ul,li{
	list-style:none;}
ul li{
	width:200px;
	height:100px;
	background:yellow;
	margin-bottom:20px;
	border:4px solid #000;
	filter:alpha(opacity:30);
	opacity:0.3;
	}	
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
	var Li=document.getElementById('li1');
	Li.onmouseover=function(){
		startMove(Li,'width',400,function(){
			startMove(Li,'height',200,function(){
				startMove(Li,'opacity',100);
				});
			});
		}
	Li.onmouseout=function(){
		startMove(Li,'opacity',30,function(){
			startMove(Li,'height',100,function(){
				startMove(Li,'width',200);
				});
			});
		}
}
</script>



move.js

 function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
		}
	else{
		return getComputedStyle(obj,false)[attr];
		}	
	}			
	//var timer=null;	
	
	function startMove(obj,attr,iTarget,fn){
		clearInterval(obj.timer);
		obj.timer=setInterval(function(){
			//1.取当前的值 
			var icur=0;
			if(icur=='opacity'){
				icur=Math.round(parseFloat(getStyle(obj.attr))*100);
				}
			else{
				icur=parseInt(getStyle(obj,attr));
				}	
			 //2.算速度	
			var speed=(iTarget-icur)/8;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			//3.检测停止
			if(iTarget==icur){
			clearInterval(obj.timer);
			  if(fn){
				  fn();
				  }
			}
		    else{
				if(attr=='opacity'){
					obj.style.filter='alpha(opacity:'+(icur+speed)+')';
					obj.style.opacity=(icur+speed)/100;
					}
				else{
					obj.style[attr]=icur+speed+'px';
					}	
			
			}
			},30)
			
		}

饭粒宝宝

2015-11-26

源自：JS动画效果 6-1

关注问题我要回答

1169

操作

收起

2 回答

李晓健
2015-11-26

html 呢？

0 回复有任何疑惑可以回复我~

收起回答

饭粒宝宝提问者

2015-11-26 回复有任何疑惑可以回复我~

李晓健
2015-11-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 type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid #000;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script>
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            }
            else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        //var timer=null;

        function startMove(obj, attr, iTarget, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //1.取当前的值
                var icur = 0;
                if (attr == 'opacity') {//看这里
                    icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //看这里
                }else {
                    icur = parseInt(getStyle(obj, attr));
                }
                //2.算速度
                var speed = (iTarget - icur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                //3.检测停止
                if (iTarget == icur) {
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }else {
                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                        obj.style.opacity = (icur + speed) / 100;
                        console.log(obj.style.opacity);
                    }else {
                        obj.style[attr] = icur + speed + 'px';
                    }
                }
            }, 30)

        };
        window.onload = function () {
            var Li = document.getElementById('li1');
            Li.onmouseover = function () {
                startMove(Li, 'width', 400, function () {
                    startMove(Li, 'height', 200, function () {
                        startMove(Li, 'opacity', 100);
                    });
                });
            }
            Li.onmouseout = function () {
                startMove(Li, 'opacity', 30, function () {
                    startMove(Li, 'height', 100, function () {
                        startMove(Li, 'width', 200);
                    });
                });
            }
        }
    </script>
</head>

<body>
<ul>
    <li id="li1"></li>
</ul>

</body>
</html>

修改后的代码，自己对应着看。

0 回复有任何疑惑可以回复我~

收起回答