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

没懂哪里不对。。。http://www.imooc.com/video/3173

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#move {
			width: 300px;
			height: 170px;
			margin: 10px auto;
			border: 1px solid #ccc;
		}
		#move a {
			display: inline-block;
			width: 58px;
			height: 55px;
			border: 1px solid #ddd;
			border-radius: 3px;
			background-color: #fff;
			text-align: center;
			margin: 10px 17px;
			position: relative;
			color: #9c9c9c;
			font-size: 12px;
			text-decoration: none;
			line-height: 25px;
			overflow: hidden;
			opacity: 1;
			filter: Alpha(opacity=100);
		}
		#move a i {
			position: absolute;
			top: 20px;
			left: 0;
			display: inline-block;
			width: 100%;
			text-align: center;
		}
		#move img {
			padding: 3px 0;
			border: none;
			z-index:-1
		}
		#move a:hover {
			color: #f00;
		}
	</style>
		window.onload=function(){
			var as=document.getElementById("move").getElementsByTagName("a");
			for(var i=0;i<as.length;i++){
				as[i].onmouseover=function(){
					var ai=this.getElementsByTagName('i')[0];
					lis_over(ai,{top:-25,opacity:0},function(){
						ai.style.top=30+'px';
						lis_over(ai,{top:20,opacity:1})	
					});
				}
			}	
		}
	</script>
</head>
<body>
	<div id="move">
		<a href="#">
			<i><img src="images/food.png"></i>
			<p>淘宝</p>
		</a>
		<a href="#">
			<i><img src="images/game.png"></i>
			<p>天猫</p>
		</a>
		<a href="#">
			<i><img src="images/insurance.png"></i>
			<p>京东</p>
		</a>
		<a href="#">
			<i><img src="images/lottery.png"></i>
			<p>易迅</p>
		</a>
		<a href="#">
			<i><img src="images/movie.png"></i>
			<p>国美</p>
		</a>
		<a href="#">				
			<i><img src="images/travel.png"></i>
			<p>苏宁</p>
		</a>		
	</div>
</body>
</html>

function lis_over(obj, json, fn) {
	obj.timer = null;
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
		var flag = true;
		for (var sty in json) {
			//样式值处理
			var wd = window.getComputedStyle(obj, null)[sty];
			if (sty == 'opacity') {
				wd = Math.round(parseFloat(wd) * 100) / 100;
			} else {
				wd = parseInt(wd);
			}
			var speed =(json[sty] - wd) / 6;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

			//console.log('sty:'+sty+';wd:'+wd+';sty:'+json[sty]);
			if(wd!=json[sty]){
				flag=false;
			}
			//透明度
			if (sty == 'opacity') {
				var a = wd * 100 + speed;
				obj.style[sty] = a / 100;
			} else {
			//其他
				obj.style[sty] = wd + speed + "px";
			}
			if (flag) {
				clearInterval(obj.timer);
				if (fn) {
					fn();
				}
			}
		}

	}, 50)
}

啥子情况？感谢啊。。。

飞天意大利面神兽

2016-07-06

源自：JS动画效果 7-1

关注问题我要回答

1121

操作

收起

3 回答

右下角_ 回答被采纳 +3 积分
2016-07-08

嘿嘿，最近有点忙，来晚了。这个问题我也没注意，最终发现，是obj.timer = null;clearInterval(obj.timer);这里两句出了问题，当obj.timer=null;时，后者相当于clearInterval(null)。有没有发现问题呢？对，就是这样导致后者并没有将原有定时器结束，而obj.timer=null，本身只是将obj.timer 指向了一个空值，亲测它没有结束定时器的能力。也就是说当前一个定时器没有结束的时候，再次触发事件，仍然会导致定时器的叠加。解决办法就是将obj.timer=null;这一句去掉就可以了。

总结而言其实就是clearInterval(timer)和timer = null的区别：

clearInterval(timer)用来终止正在进行中的计时器，timer=null把句柄timer指向一个空值，前一种是可以复用，而后者一般情况下仅在最初声明timer时使用。

好了，我了解的也就这么多了

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

收起回答

飞天意大利面神兽提问者

非常感谢！

2016-07-08 回复有任何疑惑可以回复我~

飞天意大利面神兽提问者
2016-07-06

如果这些东西都能去直接抄，去百度粘贴复制，
那我们为何还在此学习？意义何在？
同样，这个问题也不会被提出来。

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

收起回答

明天___你好
2016-07-06

你写的实在太乱，我这里总结好了，你直接拿去

//获取元素当前样式
function getStyle(obj,attr){
    if (obj.currentStyle) {
        return obj.currentStyle[attr];                         //IE浏览器
    }else{
        return getComputedStyle(obj,false)[attr];            //火狐浏览器
    }
}
//完美运动框架（支持链式运动，也支持同时运动特效）

/*
//json格式
var json = {name1:'1111',name2:'2222'};
//遍历获取每条数据
for(var i in json){
    i             =   name值
    json[i]      =    key值
}
*/
function startMove(obj,json,fn){
    //假设所有运动都到达目标值
    var torger = null;
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        for(var attr in json){
            //1.获取当前值
            var icur = 0;
            if (attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                icur = parseInt(getStyle(obj,attr));
            }
            //2.算速度(缓冲运动，运动的正负)
            var speed = (json[attr]-icur)/8;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            

            //3.检测停止
            //如果所有的运动都没有到达终点,torger为false
            if (icur != json[attr]) {
                torger = false;
                
            }else{
                torger = true;
            }
            //如果所有的运动都没有到达终点，继续运行程序
            if (attr == 'opacity') {
                obj.style.filter = 'alpha:(opacity:'+icur+speed+')';
                obj.style.opacity = (icur+speed)/100;
            }else{
                obj.style[attr] = icur + speed +'px';
            }
            
        }
        if (torger) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    },30);
    
}

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

收起回答