move.js代码如下：function startMove(obj,json,fn){ var flag=true;clearInterval(obj.timer);obj.timer=setInterval(function(){ 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=(json[attr]-icur)/8;speed=speed>0?Math.ceil(speed):Math.floor(speed);//检测停止if(icur!=json[attr]){ 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(); }}},30)}function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyle[attr]; }else{ //Firefox return getComputedStyle(obj,false)[attr]; } }主页面代码如下：<!DOCTYPE html><html><head><title>taobao</title><meta charset="utf-8"><style>*{ margin:0; padding:0;}#move{ width:600px; margin:10px auto; border:1px solid #ccc; background: #567;}#move a{ display:inline-block; width:70px; height:80px; 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: 25px; overflow: hidden;}p{ overflow: hidden; display: inline-block; bottom: 0; position: absolute;}#move a i{ position: absolute; top: 20px; left:0; display: inline-block; width:100%; text-align: center; filter: alpha(opacity:100); opacity: 1;}#move a:hover{ color:#f00;}#move img{ border:none;}</style><script type="text/javascript" src="move.js"></script><script type="text/javascript"> 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:-25,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20,opacity:0}); }); } } }</script></head><body><div id="move"><a href="#"><i><img src="images/01.png"></i><p>联系人</p></a><a href="#"><i><img src="images/02.png"></i><p>时间</p></a><a href="#"><i><img src="images/03.png"></i><p>备忘录</p></a><a href="#"><i><img src="images/04.png"></i><p>检查</p></a><a href="#"><i><img src="images/05.png"></i><p>家庭</p></a></div></body>
1 回答
stone310
TA贡献361条经验 获得超191个赞
有2个问题，1个建议；
JS上：var flag=true必须放到setInterval内，否则每次循环并不能初始化flag，flag就一直是false；
主页面代码的JS：onmouseover事件里最后一行opacity设置成100；透明度一直为0当然看不出效果了；
建议：
onmouseover替换成onmouseenter；
onmouseover会冒泡，当你鼠标移入触发，当鼠标慢慢移出来的时候，onmouseover事件还会触发一次；
替换成onmouseenter则不会冒泡；是否替换看自己需求，建议罢了
添加回答
举报
0/150
提交
取消