0

jquery.mousewheel と scrollTo を使用して、マウスホイールを動かすたびに 800 ピクセルをスクロールするシステムを作成しました。ブラウジングは次のサイトに似ています: http://beoplay.com/Products/BeoplayA8#sound-experience

私の現在のコードは次のようになります。

    var position = 1;
var rotation= true;
var ezin= 'easeInOutExpo';



if (position==1){
    $.scrollTo('0px', 100, { axis:'y',easing: ezin });
    $('.variable').text("1");
}


function DEL1AL2(){
    rotation= false;
    $('.variable').text("2");
    $.scrollTo('800px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=2;} });     
}

function DEL2AL1(){
    rotation= false;
    $('.variable').text("1");
    $.scrollTo('0px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=1;} });   
}

function DEL2AL3(){
    rotation= false;
    $('.variable').text("3");
    $.scrollTo('1600px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=3;} });
}

function DEL3AL2(){
    rotation= false;
    $('.variable').text("2");
    $.scrollTo('800px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=2} });
    ;
}

$(document).mousewheel(function(event, delta) {
    if (delta > 0 && rotation==true){
        if(position==2){
            DEL2AL1();
        };
        if(position==3){
            DEL3AL2();
        };          
    }
    else if (delta < 0 && rotation==true){
        if(position==1){
            DEL1AL2();
        };
        if(position==2){
            DEL2AL3();
        };
    };      
    event.preventDefault();     
});});

システムには数値変数がアタッチされているため、位置 1 で下にスクロールすると、関数は 800 ピクセル下にスクロールし、位置変数を 2 に変更します。

ディープリンクを追加するにはどうすればよいでしょうか (私はそれが用語だと思います)、位置が 2 の場合、URL はそれを反映します (たとえば、www.myexample.com/#2)。したがって、リンクは実際にこれに移動しますセカンドポジション？

私がこれをやろうとしている唯一の理由は、ページのさまざまな位置に独自の Facebook のいいね (ポートフォリオ アイテム) を持たせたいからです。

また、現在のコードに誤りがあればお知らせください。ゆっくりと学んでおり、磨き上げられるものは何でも大歓迎です。

前もって感謝します。

4

2 に答える 2

0

特定の要素までスクロールするときにスムーズなスクロール アニメーションが必要な場合は、次のプラグインをチェックしてください。

http://flesler.blogspot.be/2007/10/jqueryscrollto.html

このプラグインを使用すると、以下に基づいて特定の場所にスクロールできます。

  • 生の数字
  • 文字列 ('44'、'100px'、'+=30px' など)
  • DOM 要素 (論理的には、スクロール可能な要素の子)
  • スクロール可能な要素に関連するセレクター
  • 最後までスクロールする文字列 'max'。
  • コンテナのその部分までスクロールするパーセンテージを指定する文字列 (fe: 50% は中央に移動します)。
  • ハッシュ { top:x, left:y }、x および y は、上記のような任意の種類の数値/文字列にすることができます。
于 2012-11-16T10:21:27.843 に答える
0

まず、特定の位置に到着したときにウィンドウの位置を変更します。

var baseLocation = window.location;

function DEL1AL2(){
    rotation= false;
    $('.variable').text("2");
    $.scrollTo('800px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=2;} });     
    window.location = baseLocation+'#2';
}

次に、ページをロードすると、次のようなことができます。

   $(window).ready(function(){

    if (window.location.hash){
         // ...code to check what's the position that corresponds to the hash link.
        if (window.location.hash=='2'){ DEL1AL2();}
        // ...etc
    });
});
于 2012-11-15T15:59:11.030 に答える