今天我正在修复顶部按钮以移动隐藏的图像。 我想在另一个下放置一个空 anchor 。在 javascript 上使用 anchor ,并为隐藏的图像设置动画。
这是 jsfiddle http://jsfiddle.net/JohnnyDevv/TR4ps/4/
这里是 html、javascript 和 css,所以你可以更好地理解。
HTML
<div id="hidden-cartoons">
<img src="https://lh6.googleusercontent.com/-aEPxXvvzbgE/UJesTFlawfI/AAAAAAAAAz4/iYJpZwkkZ20/s228/velejador.png" class="cartoon velejador">
<img src="https://lh3.googleusercontent.com/-SdWM2VqioyI/UJesVjjZ6WI/AAAAAAAAA0A/vStlRdYcEWA/s338/bodoleite.png" class="cartoon bodoleite">
</div>
<div id="cartoons-buttons">
<a href="javascript:void(0)" class="left" id="velejador"></a>
<a href="javascript:void(0)" onclick="doSomething();" class="right"></a>
<a href="javascript:void(0)" class="left" id="bodoleite"></a>
<a href="javascript:void(0)" onclick="doSomething();" class="right"></a>
</div>
CSS
#hidden-cartoons {
position:absolute;
z-index:-99;
}
.cartoon {
width:40px;
position:absolute;
}
.cartoon.velejador {
margin-top:10px;
z-index:-99;
}
.cartoon.bodoleite {
margin-top:60px;
z-index:-99;
}
#cartoons-buttons {
width:320px;
height:520px;
position:absolute;
z-index:100;
}
.left {
padding:20px;
cursor:pointer;
margin-right: 120px;
}
.right {
padding:20px;
cursor:pointer;
margin-left: 120px;
}
#velejador {
background-color:#00ff00;
}
#bodoleite {
margin-top: 80px;
background-color:#ff0000;
}
Javascript
$(document).ready(function() {
$('#velejador').mouseover(function() { $('.velejador').stop().animate({ left: '+50', width: '40px' }, 1000); }).mouseout(function() { $('.velejador').stop().animate({ left: '0', width: '40px' }, 1000); }); $('#bodoleite').mouseover(function() { $('.bodoleite').stop().animate({ left: '+50', width: '40px' }, 1000); }).mouseout(function() { $('.bodoleite').stop().animate({ left: '0', width: '40px' }, 1000); }); });
最佳答案
CSS 中的类之间没有空格。
.cartoon .bodoleite {
margin-top:60px;
z-index:-99;
}
更新:http://jsfiddle.net/TR4ps/32/
不确定那些 .left 和 .right div 的意义是什么。您需要绝对定位 anchor 并为它们指定高度和宽度。我认为至少这就是您所追求的。
#hidden-cartoons {
position:absolute;
z-index:-99;
}
.cartoon {
width:40px;
position:absolute;
}
.cartoon.velejador {
margin-top:0px;
z-index:-99;
}
.cartoon.bodoleite {
margin-top:60px;
z-index:-99;
}
#cartoons-buttons {
width:320px;
height:520px;
position:absolute;
z-index:100;
}
#velejador {
position:absolute;
height:60px;
width:40px;
background-color:#00ff00;
float:left;
}
#bodoleite {
position:absolute;
background-color:#ff0000;
float:left;
height:100px;
width:40px;
top:60px;
}
关于另一个下的 CSS anchor ,两者都是空的以在 javascript 中设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13231968/