                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

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

<!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>

qq_xsg

2017-03-27

源自：JS动画效果 7-1

关注问题我要回答

715

操作

收起

5 回答

IT深水坑
2017-10-18

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)