2

我正在尝试做很多人之前问过的事情，但即使尝试了所有事情，我仍然无法得到我想要的结果。

我有一个 600 像素 x 1600 像素的图像，在一条垂直线上有 4 个 600 像素 x 400 像素的图像。我想在任何时候显示 600 像素 x 400 像素的图像。理想情况下，我可以将鼠标悬停在页面某处的某个元素上并将图像向上移动以显示 600 像素 x 400 像素图像的其他部分。实际上，通过将鼠标悬停在 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);
    });
});

这是jsfiddle：http: //jsfiddle.net/dirtyd77/jCvYm/1/

再次感谢

加里

4

3 回答 3

2

只是为了好玩，没有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;
}
于 2013-05-07T22:53:07.107 回答
0

正如 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/

于 2013-05-07T21:33:40.783 回答
0

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

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

$('.rollingimage').find('img')
于 2013-05-07T21:34:37.447 回答