                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

為什么我的鼠標放在圖片上它就一直動，放在圖片以為的a部分就只動一次？

<!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:?10px;
????????????left:?0;
????????????display:?inline-block;
????????????width:?100%;
????????????filter:alpha(opacity=100);
????????????opacity:?1;
????????}
????????#move?a?p{
????????????margin-top:?0;
????????}
????????#move?a:hover{
????????????color:?#f00;
????????}
????????#move?img?{
????????????width:30px;
????????????height:30px;
????????????border:none;
????????}
????</style>
????<script?src="move.js"></script>
????<script>
????????window.onload=function(){
????????????var?omove=document.getElementById("move");
????????????var?as=omove.getElementsByTagName("a");
????????????for(var?i=0;i<as.length;i++){
????????????????as[i].onmouseover=function(){
????????????????????var?_this=this.getElementsByTagName("i")[0];
????????????????????startMove(_this,{top:-25,opacity:30},function(){
????????????????????????_this.style.top=20+"px";
????????????????????????startMove(_this,{top:5,opacity:100});
????????????????????});
????????????????}
????????????}
????????}
????</script>
</head>
<body>
<div?id="move">
????<a?href="#"><i><img?src="image/披薩.png"?alt="pisa"/></i><p>披薩</p></a>
????<a?href="#"><i><img?src="image/棒冰.png"?alt="ice"/></i><p>棒冰</p></a>
????<a?href="#"><i><img?src="image/熱狗.png"?alt="hotdog"/></i><p>熱狗</p></a>
????<a?href="#"><i><img?src="image/牛油果.png"?alt="frult"/></i><p>牛油果</p></a>
????<a?href="#"><i><img?src="image/甜甜圈.png"?alt="pisa"/></i><p>甜甜圈</p></a>
????<a?href="#"><i><img?src="image/草莓.png"?alt="stroyberry"/></i><p>草莓</p></a>

????<!--<a?href="#"?class="fl"><i><img?src="image/蛋糕.png"?alt="cake"/></i><p>蛋糕</p></a>
????<a?href="#"?class="fl"><i><img?src="image/餅干.png"?alt="cookie"/></i><p>餅干</p></a>
????<a?href="#"?class="fl"><i><img?src="image/馬卡龍.png"?alt="makalong"/></i><p>馬卡龍</p></a>-->
</div>

</body>
</html>

move.js

function?getStyle(obj,attr){
????if(obj.currentStyle){
????????return?obj.currentStyle[attr];
????}else{
????????return?getComputedStyle(obj,false)[attr];
????}
}
//startMove(obj,{attr1:target1,attr1:target1,attr1:target1…},fn)
function?startMove(obj,json,fn){
????//清除定時
????clearInterval(obj.timer);
????//定時器
????obj.timer=setInterval(function?()?{
????????var?flag=true;
????????for(var?attr?in?json){
????????????//獲取樣式
????????????var?icr=0;
????????????if(attr=="opacity")
????????????{
????????????????icr=Math.round(parseFloat(getStyle(obj,attr))*100);
????????????}
????????????else
????????????{
????????????????icr=parseInt(getStyle(obj,attr));//注意返回的是有單位的要用parseInt取其數值
????????????}
????????????//計算速度
????????????var?speed=(json[attr]-icr)/20;
????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????//檢測停止
????????????if(icr!=json[attr])
????????????{
????????????????flag=false;
????????????}
????????????if(attr=="opacity")
????????????{
????????????????obj.style.opacity=(icr+speed)/100;
????????????????obj.style.filter="alpha(opacity:"+(icr+speed)+")";
????????????}
????????????else
????????????{
????????????????obj.style[attr]=icr+speed+"px";
????????????}

????????}
????????if(flag)
????????{
????????????clearInterval(obj.timer);
????????????if(fn)
????????????{
????????????????fn();
????????????}
????????}
????},20);
}