动画案例那一节的问题
图案的top值
a.从初始值20变到-25
b.再变为30
c.再由30变回20
我做出来的效果:
b和c是连续的，a和b+c之间要隔一会，就是说两个链式运动不连续，而且中途鼠标放上去就不能移出了，要不然abc整个过程就会中断，下一次鼠标放上去初始值就不是20，这应该是哪出问题了？
慕用9244143
2017-04-05
6 回答
var obj=document.getElementsByTagName("a");
for (var i = 0; i < obj.length; i++) {
obj[i].onmouseenter=function(){
var mu=this.getElementsByTagName("img")[0];
objMove(mu,{"top":-10,"opacity":0},5,function(){
mu.style.top=70+"px";
mu.style.opacity=0;
objMove(mu,{"top":12,"opacity":100},2);
});
};
};
};
对比一下，你就知道你写差中间两句了。
window.onload=function(){
var move=document.getElementById('move');
var alis=move.getElementsByTagName('a');
for (var i=0;i<alis.length;i++)
{
alis[i].onmouseover=function()
{
var ths=this.getElementsByTagName('i')[0];
start(ths,{top:-25,opacity:0},function(){
start(ths,{top:20,opacity:100});
});
}
}
}
你这部分的代码写差了吧。还是说你自己复制张贴差了？
<!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>无标题文档</title>
<style type="text/css">
div p{
font-size:22px;
font-family:"Courier";
}
a:hover{
color:#39C;
}
div a{
position:relative;
cursor:pointer;
display:inline-block;
border:1px solid;
background:#FFFFB0;
width:120px;
height:120px;
text-align:center;
margin:20px;
border-radius:10px;
}
div a i{
position:relative;
top:20px;
left:0px;
width:100%;
text-align:center;
display:inline-block;
opacity:1;
filter:alpha(opacity=100);
}
#move{
text-align:center;
width:50%;
height:80%;
border-radius:10px;
background:#E2E2E2;
}
</style>
<script src="linkMove.js"></script>
<script>
window.onload=function(){
var move=document.getElementById('move');
var alis=move.getElementsByTagName('a');
for (var i=0;i<alis.length;i++)
{
alis[i].onmouseover=function()
{
var ths=this.getElementsByTagName('i')[0];
start(ths,{top:-25,opacity:0},function(){
start(ths,{top:20,opacity:100});
});
}
}
}
</script>
</head>
<body>
<center>
<div id="move">
<a><i><img src="icons/icon8.png"/></i><p>blossom</p></a>
<a><i><img src="icons/icon12.png" /></i><p>card</p></a>
<a><i><img src="icons/icon17.png" /></i><p>violin</p></a>
<a><i><img src="icons/icon14.png"/></i><p>airplane</p></a>
<a><i><img src="icons/icon13.png" /></i><p>lollipop</p></a>
<a><i><img src="icons/icon11.png" /></i><p>hamburger</p></a>
</div>
</center>
</body>
</html>举报
0/150
提交
取消
