js运动问题
现在的效果是鼠标移动到图标上，图标向上移动，然后在从下面上来，
但是吧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回答
随时随地看视频慕课网APP
相关分类
JavaScript