现在的效果是鼠标移动到图标上，图标向上移动，然后在从下面上来，但是吧js中的 这一小段放到前一个if前 效果就变成了图标向上移动，然后从上面下来的。为什么会这样了 if(flag){clearInterval(obj.timer);if(fn){fn();} }else{flag=true; }-----------------------------------------------js文件-----------------------------------------------function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; }}function mouseMove(obj,json,fn){ clearInterval(obj.timer); var flag=true; obj.timer=setInterval(function(){ var icur=0; for(attr in json){ 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(json[attr]!=icur){ flag=false; } if(attr == "opacity"){ obj.style.opacity=(icur+speed)/100; obj.style.filter="alpha(opacity="+(icur+speed)+")"; }else{ obj.style[attr]=icur+speed+"px"; } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } }else{ flag=true; } } },30);}----------------------------------------------------------下面的是html
------------------------------------------------<!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=GB2312" /><title>无标题文档</title><style> body,div,a,i,img{ margin:0px; padding:0px; font-family:Arial, sans-serif; } div{ width:186px; height:124px; margin:0 auto; background:#ccc; } a{ position:relative; display:block; width:60px; height:60px; float:left; border:1px solid #ccc; text-align:center; background:#fff; text-decoration:none; color:#000; font-size:13px; padding-top:10px; } a i img{ border:0px; } a i{ position:absolute; left:15px; top:20px; width:30px; height:30px; opacity:1; filter:alpha:(opacity:100); } a p{ position:absolute; left:15px; top:35px; } </style><script src="index2.js"></script><script> window.onload=function(){ var aList=document.getElementsByTagName("a"); for(var i=0;i<aList.length;i++){ aList[i].onmouseover=function(){ var _this=this.getElementsByTagName("i")[0]; mouseMove(_this,{top:-20,opacity:0},function(){ _this.style.top=40+"px"; mouseMove(_this,{top:20,opacity:100}); }); } } }</script></head><body><div><a href="#"><i><img src="./image/16.png" /></i><p>游戏</p></a><a href="#"><i><img src="./image/17.png" /></i><p>旅行</p></a><a href="#"><i><img src="./image/15.png" /></i><p>保险</p></a><a href="#"><i><img src="./image/18.png" /></i><p>彩票</p></a><a href="#"><i><img src="./image/14.png" /></i><p>电影</p></a><a href="#"><i><img src="./image/13.png" /></i><p>点外卖</p></a></div></body></html>
添加回答
举报
0/150
提交
取消