                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

有沒(méi)有寫好的源代碼？我自己寫了一直都不行

<!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取當(dāng)前值	
	?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檢測(cè)停止
	?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>