按视频编写代码后怎么运行的时候要是快速划过图标图片是上去后不下来，这到底错在哪里？-慕课网

按视频编写代码后怎么运行的时候要是快速划过图标图片是上去后不下来，这到底错在哪里？

来源：7-1 JS动画案例

qq_xsg

2017-03-27 17:20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS案例</title>
<style>
#move{
   width:300px;
   height:190px;
   background-color:#CCC;
   margin:10px auto;
   border:1px solid #ccc;}
#move a{
   display:inline-block;
   width:58px;
   height:30px;
   border:1px solid #ddd;
   border-radius:3px;
   background-color:#fff;
   text-align:center;
   margin:10px 17px;
   position:relative;
   padding-top:40px;
   color:#9c9c9c;
   font-size:12px;
   text-decoration:none;
   line-height:5px;
   overflow:hidden;}
#move a i{
   position:absolute;
   top:15px;
   left:0;
   display:inline-block;
   width:100%;
   text-align:center;
   fliter:alpha(opacity=100);
   opacity:1;}
#move a:hover{
   color:#900;}
#move img{
   border:none;}
p{
   font-style: normal;}
</style>
<script src="move.js"></script>
<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:-20,opacity:0},function(){
           _this.style.top=25+'px';
           startMove(_this,{top:15,opacity:100});
           });
       }
   }
}
</script>
</head>

<body>
<div id='move'>
<a href="#"><i><img src="image/barbecue_29.927360774818px_1150132_easyicon.net.png" /></i><p>火锅</p></a>
<a href="#"><i><img src="image/burger_25.118644067797px_1150135_easyicon.net.png" /></i><p>汉堡</p></a>
<a href="#"><i><img src="image/cheese_28.153846153846px_1150138_easyicon.net.png" /></i><p>蛋糕</p></a>
<a href="#"><i><img src="image/chocolate_39.587628865979px_1150142_easyicon.net.png" /></i><p>面包</p></a>
<a href="#"><i><img src="image/chicken_22.46511627907px_1150141_easyicon.net.png" /></i><p>火腿</p></a>
<a href="#"><i><img src="image/dining_room_24px_1169288_easyicon.net.png" /></i><p>西餐</p></a>
</div>
</body>
</html>

写回答关注

5回答

IT深水坑

2017-10-18 11:39:36

argument.timer = setInterval(function () {
var flag = true; //假设所有运动都达到目标值
for (var attr in json) {
var icur = 0;
if (attr === 'opacity') {
icur = Math.round(parseFloat(getStyle(argument, attr)) * 100);
} else {
icur = parseInt(getStyle(argument, attr));
}

//算速度
var speed = (json[attr] - icur)/8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//检测停止
if (icur !== json[attr]) {
flag = false;
}
if (attr === 'opacity') {
argument.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
argument.style.opacity = (icur + speed) / 100;
} else {
argument.style[attr] = icur + speed + "px";
}
}
if(flag){
clearInterval(argument.timer);
if(fn){
fn();
}
}
},30)
真的是将flag=true放在定时器里面，执行成功

1 1

慕仙5237...

不错，我试了解决了厉害

2017-11-02 09:49:14

共 1 条回复 >
慕粉3856185

2017-08-20 18:48:14

将 flag=true;放在定时器里面，json循环外面就解决了

2 1

慕圣1384...

可是这样不一定会等到所有属性值都达到要求才停止

2018-09-05 16:35:06

共 2 条回复 >
慕粉3856185

2017-08-20 18:45:21

个人认为是运动框架有问题，但是我也找不到问题所在

0 0
慕田峪6997291

2017-04-07 19:11:38

我也是这样，为什么

0 1
qq_xsg

2017-03-27 17:23:20

运行结果是这样

0 0