0

タブを使用してスクロールdivを完成させるだけですが、たとえばリンク4をクリックし、スクリプトの代わりにすべてのdivをスクロールして番号4に到達するように、それを作成する方法を見つけようとしています。 div4でスクロール

jsフィドル： http： //jsfiddle.net/cC4tU/1/

jquery

$.extend($.easing,
 {
     easeInOutQuad: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInOutElastic: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    }

    });
//EXPAND PAGE DIV CONTENT
$(".tab_item").hover(function(){
         var background = $(this).parent().find(".moving_bg");
        $(background).stop().animate({
            left: $(this).position()['left']
        }, {
            duration: 700, easing: 'easeInOutElastic'
        });
    });

var TabbedContent = {
    init: function() {    
        $(".tab_item").click(function() {
            var background = $(this).parent().find(".moving_bg");
            $(background).stop().animate({
                left: $(this).position()['left']
            }, {
                duration: 500
            });
            TabbedContent.slideContent($(this));
        });
    },

    slideContent: function(obj) {
        var margin = $(obj).parent().parent().find(".slide_content").width();
        margin = margin * ($(obj).prevAll().size() - 1);
        margin = margin * -1;
        $(obj).parent().parent().find(".tabslider").stop().animate({
            marginLeft: margin + "px"
        }, {
            duration: 1500, easing: 'easeInOutQuad'
        });
    }
}
TabbedContent.init();
4

1 に答える 1

1

Dwhizz、あなたが望むことは確かに可能です。

私はあなたのためにそれを書くつもりはありませんが、私が知る限り、すべての変更はにありますslideContent。

ストラテジー ：

  • 現在および新規を除くすべてのタブスライダー要素を非表示にする
  • 表示されている2つの項目に基づいてマージンを計算します
  • アニメート（おそらく変更なし）
  • 次回のために現在のタブスライダー要素を覚えておいてください。
于 2012-08-07T00:03:07.857 に答える