问答详情
源自:7-1 JS动画案例

有没有写好的源代码?我自己写了一直都不行

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{width: 100px; height: 100px; margin-top:20px; margin-right: 20px; border: 2px solid #000;position: relative; float: left; list-style: none; display: inline-block;}
a img{border: none; width: 30px; height: 30px;}
a i{ width: 100%;  position: absolute;top:20px;left: 0;display: inline-block; text-align: center;filter:alpha(opacity=100); opacity: 1; }
a p{ text-align: center; position: absolute; bottom: 0; width: 100%}

</style>
<script type="text/javascript">
	window.onload=function(){
		var omove=document.getElementById('move');
		var oli=omove.getElementsByTagName('a')
		for (var i = 0; i < oli.length; i++) {
			oli[i].onmouseover=function(){
				var _this=this.getElementsByTagName('i')[0]
				startmove(_this,{top:-25,opacity:0},function(){				
					_this.style.top=25+'px'
					startmove(_this,{top:20,opacity:100})
				})
			}			
		}
	
}
function getstyle(obj,attr){
  if (obj.currentStyle) {
  	return obj.currentStyle[attr]
  } else{
  	return getComputedStyle(obj,false)[attr]
  };
}
//statrtmove(obj,{attr1:tg1,attr2:tg2},fn)
function startmove (obj,json,fn) {
	var flag = true
	clearInterval(obj.timer)
	obj.timer=setInterval(function() {
	 for (var attr in json ){
	 //1取当前值	
	 var cur=0
	 if (attr=='opacity') {
      cur=Math.round(parseFloat(getstyle(obj,attr))*100)
	 } else{
	 	cur=parseInt(getstyle(obj,attr)) 
	 };	
	 //2算速度
	 speed=	(json[attr]-cur)/8
	 speed=speed>0?Math.ceil(speed):Math.floor(speed)
	 //3检测停止
	 if (cur!=json[attr]) {
	 	flag = false	 	
	 } 	
	 if (attr=='opacity') {
	 		obj.style.filter='alpha(opacity:'+(cur+speed)+')';
     		obj.style.opacity=(cur+speed)/100;
	 	} else{
	 		obj.style[attr]=cur+speed+'px'
	 	};
	 	
	 }
	 if(flag){
	 	clearInterval(obj.timer)
         if(fn){
         	fn()
         }
	 }
	}, 30);
}
</script>
<div id="move">
<a href="#"><i><img src="images/tao.jpeg" /></i><p>淘宝</p></a>
<a href="#"><i><img src="images/tian.png" /></i><p>天猫</p></a>
<a href="#"><i><img src="images/tao.jpeg" /></i><p>淘宝</p></a>
<a href="#"><i><img src="images/tian.png" /></i><p>天猫</p></a>
<a href="#"><i><img src="images/tao.jpeg" /></i><p>淘宝</p></a>
<a href="#"><i><img src="images/tian.png" /></i><p>天猫</p></a>
</div>

</body>
</html>


提问者:吸个鱼 2015-07-21 15:49

个回答

  • 醒悟wjn
    2015-08-23 15:36:15

    http://pan.baidu.com/s/1i3fFyy5 自己下载去看