我正在尝试做很多人以前问过的事情,但是即使尝试了一切之后,我仍然无法获得想要的结果。

我有一个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')

07-26 00:23
查看更多