淘宝小icon垂直环绕

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实例</title>
	<style>
		#move{
			width: 300px;
			border:1px solid #ccc;
			margin:0 auto;
			padding:10px;
			overflow: hidden;

		}
		#move a{
			display: inline-block;
			width: 58px;
			height: 25px;
			border:1px solid #ddd;
			border-radius: 3px;
			text-align: center;
			margin:10px 17px;
			position: relative;
			padding-top: 40px;
			color: #9c9c9c;
			font-size: 12px;
			text-decoration: none;
			line-height: 25px;
			overflow: hidden;
		}
		#move a i{
			position: absolute;
			top: 20px;
			left: 0;
			display: inline-block;
			width: 100%;
			filter:alpha(opacity=100);
			opacity: 1; 
		}
		#move a p{
			margin-top: 0px;
		}
		#move a:hover{
			color: #f00;
		}
		#move img {
			border:none;   
		}
	</style>
	<script type="text/javascript" src="js/move.js"></script>
	<script>
		window.onload=function(){
			var move = document.getElementById('move');
			var aList = move.getElementsByTagName('a');
			for(var i=0;i<aList.length;i++){
				aList[i].onmouseover = function(){
					var _this = this.getElementsByTagName('i')[0];
					startMove(_this,{top:-25,opacity:0},function(){
						_this.style.top= 30 + 'px';
						startMove(_this,{top:20,opacity:100});
					});
				}
			}
		}
        		function getStyle(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr];
			}else{
				return getComputedStyle(obj,false)[attr];
			}
		}
		//stareMove(obj,{attr1:itarget1,attr2:itarget2},fn)
		function startMove(obj,json,fn){
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
			var flag=true;//此句之前是放在定时器之外，如果放在定时器之外，经过第一次赋值之后一直是false，放在定时器之内，每次执行都会初始化flag为ture
				for(var attr in json){
				var icur=0;
				if(attr == 'opacity'){
					 icur = parseFloat(getStyle(obj, attr))*100;
				}else{
					 icur = parseInt(getStyle(obj, attr));
				}
				var speed  = (json[attr]-icur)/8;
				speed=speed>0?Math.ceil(speed):Math.floor(speed);
				if(icur != json[attr])
				{
					flag=false;
				
				if(attr == 'opacity'){
						obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
						obj.style.opacity=(icur+speed)/100;
				}else{
						obj.style[attr]=icur + speed+'px';
				}
				}
			}
				if(flag){
					clearInterval(obj.timer);
					if(fn){
						fn();
					}
				}
			},30);
		}
	</script>
</head>
<body>
	<div id="move">
		<a href="#"><i><img src="images/caipiao.jpg"></i><p>彩票</p></a>
		<a href="#"><i><img src="images/movie.jpg" ></i><p>电影</p></a>
		<a href="#"><i><img src="images/game.jpg" ></i><p>游戏</p></a>
		<a href="#"><i><img src="images/fly.jpg" ></i><p>旅行</p></a>
		<a href="#"><i><img src="images/baoxian.jpg" ></i><p>保险</p></a>
		<a href="#"><i><img src="images/food.jpg" ></i><p>外卖</p></a>
	</div>
</body>
</html>

思路：利用链式运动先从top20移动到-25，透明度变为0；然后回调函数设置top为30.（此时opacity为0，所以看不到变化），然后再执行startMove，top30到20，opacity变为100。

疑点：（1） flag=true 的位置

此句之前是放在定时器之外，如果放在定时器之外，经过第一次赋值之后一直是false，不会执行回调函数。放在定时器之内，每次执行都会初始化flag为ture。

（2）鼠标放在<i>标签上，冒泡到<a>触发onmouseover，当i由top30向top20移动时，会再次经过鼠标所在的位置，再次冒泡到<a>，触发onmouseover。造成一个无限循环的bug。若将onmouseover改为onmouseenter可解决。（onmouseenter不支持冒泡）且进入时才会触发。onmousemove时在里面移动就触发

淘宝小icon垂直环绕

猜你喜欢