Question

我正在尝试做之前许多人所要求的事情，但即使在尝试了一切之后，我仍然无法得到我想要的结果。

我的图像是600px乘1600px，4张图像是600px乘400px的垂直线。我希望在任何时候都能显示600px×400px的图像。理想情况下，我可以将鼠标悬停在页面上的某个元素上，然后向上移动图像以显示600px×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/

再次感谢

加里

Answer 1

只是为了好玩，没有JS：

http://jsfiddle.net/coma/MTWdb/5/

<强> HTML

<div id="foo">
    <a href="#">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
    <a href="#">Button 4</a>
    <div></div>
</div>

<强> CSS

#foo {
    width: 400px;
    border: 2px solid #E78F25;
    position: relative;
}

#foo > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 200px;
    background: #fff url(http://placekitten.com/600/1600) no-repeat 0 0;
    transition: background-position .5s;
}

#foo > a {
    display: block;
    width: 200px;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
}

#foo > a + a {
    border-top: 1px solid #E78F25;
}

#foo > a:nth-child(1):hover ~ div {
    background-position: 0 0;
}

#foo > a:nth-child(2):hover ~ div {
    background-position: 0 -400px;
}

#foo > a:nth-child(3):hover ~ div {
    background-position: 0 -800px;
}

#foo > a:nth-child(4):hover ~ div {
    background-position: 0 -1200px;
}

Answer 2

正如Dom所提到的，你提供的jsFiddle没有引用jQuery库。它也没有包含任何实际图像，只包含三个按钮之一的代码。我怀疑那些是你遇到的原始问题。（缺少对jQuery的引用可能是。）

一旦我把它拉直了，我注意到悬停按钮会导致图片滑出屏幕，而不是滚动。解决这个问题的最简单方法是移动img元素，而不是移动div。（更自然的方式是更改div的滚动位置，但我不记得如何做到这一点。）

添加了CSS：

.rollingimage img {
    position: relative;
}

新JS：

$(document).ready(function(){
    $(".button1").hover(function(){
        $('.rollingimage img').stop().animate({'top': '0px'}, 1500);
    });
    $(".button2").hover(function(){
        $('.rollingimage img').stop().animate({'top': '-400px'}, 1500);
    });
    $(".button3").hover(function(){
        $('.rollingimage img').stop().animate({'top': '-800px'}, 1500);
    });
    $(".button4").hover(function(){
        $('.rollingimage img').stop().animate({'top': '-1200px'}, 1500);
    });
});

jsFiddle：http://jsfiddle.net/jCvYm/6/

Answer 3

您需要更改div内部图像的位置，而不是div本身。要为我的示例设置动画，您可以添加CSS过渡以获得比JS动画更好的性能。

http://jsfiddle.net/jCvYm/8/

$('.rollingimage').find('img')

如何通过悬停在另一个元素上来改变一个元素？

3 个答案: