鼠標移入后圖標不停的循環(huán)，怎么讓它只做一次運動
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>任意屬性值</title>
<style?type="text/css">
*{margin:0;padding: 0;}
#move{
?? ?? width: 300px;
????? height: 220px;
????? background: #ccc;
????? text-align: center;
????? margin:50px 400px;}
?a{position: relative;
?? text-decoration: none;
?? display: inline-block;
?? background: white;
?? width: 60px;
?? height: 80px;
?? margin-top:20px;
?? margin-right: 20px;
??? }
i{position: absolute;
? margin:20px -20px;
? color: red;
? }
p{position: absolute;
? margin-top: 60px;
? margin-left: 15px;
? font-size: 12px;
? color: black;
? }
</style>
<script?type="text/javascript">
window.onload=function(){
??????????? var oDiv=document.getElementById("move");
??????????? var ali=document.getElementsByTagName("a");
??????????? for (var i = ali.length - 1; i >= 0; i--) {
??????????????? ali[i].onmouseover=function(){
??????????????????? var _this=this.getElementsByTagName("i")[0];
??????????????????? startMove(_this,{'margin-top':-5},function(){
??????????????????????? _this.style['margin-top']=35+'px';
??????????????????????? startMove(_this,{'margin-top':20})
??????????????????? });
??????????????? }
??????????? };
??????? }
function startMove(obj,json,fn){
??? clearInterval(obj.timer);
??? obj.timer=setInterval(function(){
?? ??? ?var flag=true;//用來判斷json是否全部執(zhí)行完
?? ??? ?for(var arr in json){
?? ??? ?var cur=0;
?? ??? ?if(arr=='opacity'){
?? ??? ??? ?cur=Math.round(parseFloat(getStyle(obj,arr))*100);
?? ??? ?}else{
?? ??? ??? ?cur=parseInt(getStyle(obj,arr));
?? ??? ?}
?? ??? ?var speed=(json[arr]-cur)/8;
?? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ?
?? ??? ?if(cur!==json[arr]){//加入json沒有全部到達目標值，那么繼續(xù)則行
?? ??? ??? ?flag=false;
?? ??? ??? ?if(arr=='opacity'){
?? ??? ??? ??? ?obj.style.filter='alpha(opacity:'+(cur+speed)+')';
?? ??? ??? ??? ?obj.style.opacity=(cur+speed)/100;
?? ??? ??? ?}else{
?? ??? ??? ?obj.style[arr]=parseInt(cur)+speed+'px';
?? ??? ???? }
?? ??? ?}
?? ??? ???? if(flag){
?? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ?if(fn){
?? ??? ??? ??? ?fn();
?? ??? ??? ?}
?? ??? ?}
?? ?
?? ??? ?}
??? },30)
}
function getStyle(obj,arr){
?? ?if(obj.currentStyle){
?? ??? ?return obj.currentStyle[arr];
?? ?}else{
?? ??? ?return getComputedStyle(obj,false)[arr];
?? ?}
}
</script>
</head>
<body>
??? ?<div id="move">
??? ?<a href="www.baidu.com"><i id="icon1">$$$</i><p>話費</p></a>
??? <a href="www.baidu.com"><i id="icon2">!!!</i><p>充值</p></a>
??? <a href="www.baidu.com"><i id="icon3">###</i><p>游戲</p></a>
??? <a href="www.baidu.com"><i id="icon4">@@</i><p>旅游</p></a>
??? ?</div>
?</body>
</html>
2016-01-03
onmouseover改為onmouseenter即可