0

ここに見られるものと同様の効果を作成しようとしています

http://www.templatemonster.com/demo/42436.html

ナビゲーション バーのボタンを押すと、コンテンツが左側からスライドして中央に表示されます。別のボタンを押すと、新しいコンテンツが同じように移動し、古いコンテンツ ボックスが右側に残ります。大きなスライダーを使用してこれを作成しようとしましたが、ナビゲーションがオフだったので、提案は大きなボーナスになります!

4

2 に答える 2

0

メニュー項目と同じ順序でメニューに対応する div を作成し、それぞれの div に同じクラスと css プロパティ (幅、高さ、位置: 絶対) を与えてから、次のコードを使用します。

$(document).ready(function(){
$('.active').css('left', ($(window).width() - $('.active').outerWidth())/2);  
$('li').click(function(){
var ind = $(this).index(),
    activeSlide = $('.active'),    
    slide = $('.slide').eq(ind);
    if(!slide.hasClass('active')){
   slide.stop().animate({'left': ($(window).width() - slide.outerWidth()) / 2}, 300);
        activeSlide.animate({'left': $(window).width()}, 300, function(){
            activeSlide.css('left', - activeSlide.outerWidth());
        });
        activeSlide.removeClass('active');
        slide.addClass('active');   
    }
});        
$(window).resize(function(){
    $('.active').css('left', ($(window).width() - $('.active').outerWidth()) / 2);
});                  
});

HTML 構造と CSS プロパティの詳細については、こちらのDEMOを参照してください。

于 2013-03-21T22:29:40.737 に答える
0

これに対する考えられる解決策は、jQuery Plus Anchor プラグインを使用することです。

http://css-plus.com/2011/03/plusanchor-jquery-plugin/

于 2013-03-21T22:03:02.390 に答える