鼠标移入后图标不停的循环，怎么让它只做一次运动
纪奕滨
2015-10-03 16:26
<!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是否全部执行完
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没有全部到达目标值，那么继续则行
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>
1回答
-
- 大黑虎
- 2016-01-03 23:35:12
onmouseover改为onmouseenter即可
JS动画效果
113925 学习 · 1443 问题
相似问题