为什么动画会一直转动-慕课网

首页课程实战体系课手记专栏慕课教程

为什么动画会一直转动

来源：7-1 JS动画案例

hnmw

2016-08-18 17:46

<html>

<head>

<style>

body,

div {

margin: 0;

padding: 0;

}

#pic {

width: 300px;

margin: 10px auto;

border: 1px solid #ccc;

background-color: pink;

}

#pic a {

display: inline-block;

width: 58px;

height: 25px;

border: 1px solid #ddd;

border-radius: 3px;

background-color: #fff;

text-align: center;

margin: 10px 17px;

position: relative;

padding: 40px 0px 10px 0px;

color: #9c9c9c;

font-size: 12px;

text-decoration: none;

line-height: 30px;

overflow: hidden;

}

#pic a i {

position: absolute;

top: 0px;

left: 0px;

display: inline-block;

width: 100%;

text-align: center;

fliter: alpha(opacity: 100);

opacity: 1;

}

#pic a:hover {

color: #F00;

}

#pic img {

border: none;

}

</style>

window.onload = function() {

var Pic = document.getElementById('pic');

var aList = Pic.getElementsByTagName('a');

for(var i = 0; i < aList.length; i++) {

aList[i].onmouseover = function() {

var _this = this.getElementsByTagName('i')[0];

startMove(_this, {top: -60,opacity: 0}, function() {

_this.style.top = 60 + 'px';

startMove(_this, {top: 0,opacity: 100});

});

}

</script>

</head>

<body>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</body>

</html>

写回答关注

2回答

Rimas: 2016-08-24 17:22:50

兄弟你确定改对了吗？我改了以后就正常了：

源代码如下：

index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝</title>
<style>
body,
div {
margin: 0;
padding: 0;
}
#pic {
width: 300px;
margin: 10px auto;
border: 1px solid #ccc;
background-color: pink;
}
#pic a {
display: inline-block;
width: 58px;
height: 25px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding: 40px 0px 10px 0px;
color: #9c9c9c;
font-size: 12px;
text-decoration: none;
line-height: 30px;
overflow: hidden;
}
#pic a i {
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
width: 100%;
text-align: center;
fliter: alpha(opacity: 100);
opacity: 1;
}
#pic a:hover {
color: #F00;
}
#pic img {
border: none;
}
</style>
<script type="text/javascript" src="js/move.js"></script>
<script>
window.onload = function() {
var Pic = document.getElementById('pic');
var aList = Pic.getElementsByTagName('a');
for(var i = 0; i < aList.length; i++) {
aList[i].onmouseenter = function() {
var _this = this.getElementsByTagName('i')[0];
startMove(_this, {top: -60,opacity: 0}, function() {
_this.style.top = 60 + 'px';
startMove(_this, {top: 0,opacity: 100});
});
}
}
}
</script>
</head>
<body>
<div id="pic">
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>1</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>2</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>3</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>4</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>5</p>
</a>
<a href="#"><i><img src="img/a.jpg" style="width: 58px;height: 60px;"/></i>
<p>6</p>
</a>
</div>
</body>
</html>

move.js:

function startMove(obj,json,fn){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var flag = true;
    for(var attr in json){
      var icur = 0;
      if(attr == 'opacity'){
        icur = Math.round(parseFloat(getStyle(obj,attr))*100);
      } else {
        icur = parseInt(getStyle(obj,attr));
      }
      var speed =0;
      speed = (json[attr]-icur)/10;
      speed = speed >0?Math.ceil(speed):Math.floor(speed);
      if(json[attr] != icur  ){
        flag = false;
        if(attr == 'opacity'){
          obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
          obj.style[attr] = (icur+speed)/100;
        } else {
          obj.style[attr] = icur + speed +'px';
        }
      }
    }
    if(flag) {
      clearInterval(obj.timer);
      if(fn){
        fn();
      }
    }
  },10);
}
function getStyle(obj,attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj,false)[attr];
  }
}

图片：a.jpg(随意)

1 0

慕粉3122...

我改成了onmouseenter也好了。但是如果是over的话，我鼠标不移动，动画也还是会动啊，top和opacity一直变。

2018-06-10 17:29:22

共 1 条回复 >