0

私はこれらすべてに不慣れで、このサイトのような画像移動効果を得ようとしています: http://www.heroku.com/ . ナビゲーション リンクがクリックされたときに画像を div に沿って移動するにはどうすればよいですか?

4

2 に答える 2

1

メインページの折り紙のステージ画像のことで、鶴をクリックすると矢印がハイライト表示されますか？このまさにこのページで、彼らは jQuery animate メソッドを使用しています。home.js ファイルのコード全体を見ることができます。

そのようなことを試してみたい場合は、（jQueryを使用して）次のような同様のことを行います。

$(function () {
    var slider = $('#slider'),
        first = $('.list-item').first(),
        margin = (first.outerWidth() - first.innerWidth()) / 2,
        // compute the offset for the slider
        // you will have to tailor those to your specific implementation
        offset = (slider.outerWidth() / 2) +
                 ((first.outerWidth() - slider.outerWidth()) / 2);
    // attach click event to the menu elements
    $('.list-item').on('click', function () {
        var self = $(this),
            siblings = self.siblings(),
            x;
        // if not active, move the slider accordingly
        if (!self.hasClass('active')) {
            siblings.removeClass('active');
            self.addClass('active');
            x = offset + margin + self.position().left;
            // the magic happens here :)
            slider.animate({
                left: x
            }, 500);
        }
    });
    // trigger the click event for the first list element
    first.trigger('click');
});

もちろん、HTML 要素を適切に準備し、スタイルを追加し、余白、外側/内側の幅などを調整する必要があります。

ここで私の 5 分間のチュートリアル/例を見つけることができます: http://jsfiddle.net/krwck/bjVdN/10/

于 2012-07-12T20:15:14.483 に答える
0

おそらく、そのための最良の選択は JQuery でしょう。あなたが定義することができます

<a class='menu'>Option 1</a>
<a class='menu'>Option 2</a>
<a class='menu'>Option 3</a>

<div id='moveable'></div>

このようにJQueryを使用するよりも：

$(".menu").click(function(){
   $("#moveable").animate({

   right: '+=150',

   }, 500, function() {
   // Animation complete.
 });
});

いくつかの CSS スタイルも必要になります。これが少し役立つことを願っています。

このリンクも役立つかもしれません: http://api.jquery.com/animate/

于 2012-07-12T19:10:11.630 に答える