我正在尝试做很多人以前问过的事情,但是即使尝试了一切之后,我仍然无法获得想要的结果。
我有一个600px x 1600px的图像,在垂直线上有4个600px x 400px的图像。我想一次显示600px x 400px的图像。理想情况下,我可以将鼠标悬停在页面上某个元素上,并将图像向上移动以显示600px x 400px图像的其他部分。实际上,将鼠标悬停在4个元素上,可以看到4张图像。
我已经尝试过各种css3和jquery解决方案,但是都没有用。我将不胜感激。
的HTML
<div class="mainimage">
<div class="buttonsection">
<div class="button1">Button 1</div>
<div class="button2">Button 2</div>
<div class="button3">Button 3</div>
<div class="button4">Button 4</div>
</div><!--end of buttonsection-->
<div class="rollingimage">
<img src="IMG/four-pics.png">
</div><!--end of rollingimage-->
</div><!--end of mainimage-->
</div><!--end of main content-->
的CSS
.mainimage {
position: relative;
top: 0px;
left: 0px;
width: 900px;
height: 400px;
border: 2px solid #E78F25;
margin: 0 10px 20px 0;
}
.buttonsection {
width: 290px;
height: 400px;
position: relative;
float: left;
}
.button1,
.button2,
.button3,
.button4 {
display: inline;
height: 98px;
width: 290px;
border: 1px solid #E78F24;
text-align: center;
float: left;
}
.rollingimage {
width: 598px;
height: 400px;
position: relative;
overflow: hidden;
top: 0px;
left: 0px;
float: right;
}
jQuery的
$(document).ready(function(){
$(".button1").hover(function(){
$('.rollingimage').stop().animate({'top': '-200px'}, 1500);
});
});
这是jsfidle:http://jsfiddle.net/dirtyd77/jCvYm/1/
再次感谢
加里
最佳答案
您需要更改div内图像的位置,而不是div本身。为了给我的示例添加动画效果,您可以添加CSS过渡,以获得比JS动画更好的性能。
http://jsfiddle.net/jCvYm/8/
$('.rollingimage').find('img')