求大神看看，我的问题不知道错在哪了，动画向上消失以后，不会回来，得把鼠标移除再进来
这个是.html里的
<!DOCTYPE html>
<html>
<head>
<title> 同时运动 </title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script src="index.js"></script>
<style>
#move a:hover{
/*鼠标放在图片上*/
color: #f00;
}
#move img{
border: none;
}
#move a{
display: inline-block;
width: 100px;
height: 150px;
border: 1px solid #dddddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
/*padding-top: 40px;*/
color: #9c9c9c;
font-size: 20px;
text-decoration: none;
line-height: 15px;
/*overflow: hidden;*/
border: 1px solid rebeccapurple;
}
#move a i{
position: relative;
left: 0px;
display: inline-block;
width: 100%;
text-align: center;
opacity: 1;
top: 0px;
}
#move {
width: 500px;
height: 400px;
background-color: #9c9c9c;
border: 1px solid black;
margin: auto;
padding:20px;
}
</style>
<script>
window.onload = function (){
var oMove = document.getElementById("move");
var aList = oMove.getElementsByTagName("a");
for (var i=0;i<aList.length;i++){
aList[i].onmouseover = function (){
var _this = this.getElementsByTagName("i")[0];
startMove(_this,{top:-100,opacity:0},function(){
_this.style.top = 10+"px";
startMove(_this,{top:0,opacity:100})
});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><i><img src="001.jpg"></i><p>彩票</p></a>
<a href="#"><i><img src="001.jpg"></i><p>电影</p></a>
<a href="#"><i><img src="001.jpg"></i><p>音乐</p></a>
<a href="#"><i><img src="001.jpg"></i><p>缴费</p></a>
<a href="#"><i><img src="001.jpg"></i><p>理财</p></a>
<a href="#"><i><img src="001.jpg"></i><p>外卖</p></a>
</div>
</body>
</html>
下面是.js里封装的
/**
* Created by Administrator on 2016/4/19.
*/
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj,false)[attr];
}
}
//startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj,json,fn){
var flag = true;//假设所有的运动都到达目标值
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for (var attr in json){
//1.取当前的值
var icur = 0;
if(attr == "opacity"){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else {
icur = parseInt(getStyle(obj,attr));
}
//2.算速度
var speed = (json[attr]-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur != json[attr]){
flag = false;
}
if(attr == "opacity"){
obj.style.filter = "alpha:(opacity:'+icur+speed+')";
obj.style.opacity = (icur+speed)/100;
}else {
obj.style[attr] = icur + speed + "px";
}
}
if(flag){
clearInterval(obj.timer);
if (fn){
fn();
}
}
},30)
}
