链式动画中为什么只能执行第一层函数,第二层函数无法实现,就是改变了宽度,透明度没改变?

来源:5-1 JS链式动画

慕粉3598352

2016-07-21 13:08

<!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>
</head>
<script>
window.onload=function(){
	var ali=document.getElementsByTagName('li');
	for(var i=0;i<ali.length;i++)
	{
	ali[i].alpha=30;
	ali[i].time=null;
	ali[i].onmouseover=function(){var g=this;startmove(g,'width',200,function(){startmove(g,'opacity',100)});}
	ali[i].onmouseout=function(){var g=this;startmove(g,'opacity',30,function(){startmove(g,'width',100)});}
	}
	//var alpha=30;
		function getStyle(obj,attr){
		if(obj.currentStyle)
		return obj.currentStyle[attr];
		else{
			return getComputedStyle(obj,false)[attr];
			}
		}
	function startmove(obj,attr,target,fn){
	clearInterval(obj.time);
	obj.time=setInterval(function(){
		var icon=0;
		if(attr=='opacity'){
			icon=Math.round(parseFloat(getStyle(obj,attr))*100);
			}
		else
			{
		      icon=parseInt(getStyle(obj,attr));
			}	
		var speed=(target-icon)/10;
		speed>0?Math.ceil(speed):Math.floor(speed);
		if(icon==target)
		{
			clearInterval(obj.time);
			if(fn)
			{fn();}
			}
		else{
			if(attr=='opacity')
			{
				obj.alpha+=speed;
				obj.style.filter='alpha(opacity:'+icon+speed+')';
				obj.style.opacity=(icon+speed)/100;}
			else
			    obj.style[attr]=icon+speed+'px';
		}
		},30)
		}
}
</script>
<style>
li{width:100px;height:100px;list-style:none;margin:10px;background-color:#F00;filter:alpha(opacity:30);opacity:0.3;}
</style>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>


写回答 关注

2回答

  • qq_兰花草_5
    2016-07-22 14:12:08

    ali[i].onmouseover=function(){startmove(this,'width',400,function(){startmove(ali[0],'height',400);});}

    问题出在第二个function中的this,若改为指定的某个ali[0],就可以执行

  • 无痴
    2016-07-22 12:49:05

    ----JS部分

    function startMove(obj,attr,mu,fn){//fn为再传一个函数

    clearInterval(obj.timer);

    obj.timer=setInterval(function(){

    var x=0;

    if(attr=='opacity'){

    x=parseFloat(getstyle(obj,attr))*100;

    }else{

    x=parseInt(getstyle(obj,attr));

    }

    var speed=(mu-x)/10;

    speed=speed>0?Math.ceil(speed):Math.floor(speed);

    if(x==mu){

    clearInterval(obj.timer);

    if(fn){

    fn();

    }

    }else{

    if(attr=='opacity'){

    obj.style.filter='alpha(opacity:'+(x+speed)+')';

    obj.style.opacity=(x+speed)/100

    }

    obj.style[attr]=x+speed+'px';

    }

    },50);

    }

    function getstyle(obj,attr){

    if(obj.currentStyle){

    return obj.currentStyle[attr];

    }else

    {

    return getComputedStyle(obj,false)[attr];

    }

    }



    HTML部分

    <!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{list-style:none;}

    ul li{

    width:200px;

    height:100px;

    background-color:#0F0;

    margin-bottom:10px;

    border:5px solid #000;

    filter:alpha(opacity:30);

    opacity:0.3;

    }

    </style>

    <script src="kj.js"></script>

    <script>

    window.onload=function(){

    var Li=document.getElementById('li1');

    Li.onmouseover=function(){

    startMove(Li,'width',400,function(){

    startMove(Li,'height',400,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>




    这我写的你参考一下,而且我这个和老师一样的

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题