2

多くの人が以前に尋ねたことをやろうとしていますが、すべてを試した後でも、私が望む結果を得ることができません.

600px x 1600px の画像があり、縦に 600px x 400px の画像が 4 つあります。一度に 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);
    });
});

これがjsfiddleです： http://jsfiddle.net/dirtyd77/jCvYm/1/

ありがとう

ゲイリー

4

3 に答える 3

0

Dom が述べたように、あなたが提供した jsFiddle は jQuery ライブラリを参照していませんでした。また、実際の画像は含まれておらず、3 つのボタンのうちの 1 つのコードのみが含まれていました。しかし、それらがあなたが抱えていた最初の問題だったとは思えません。(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 に答える