3

三角法が苦手なため、平行四辺形を正しい方向にスクロールするのに問題があります。

私はDIVcss属性を持つを持っています：-webkit-transform: rotate(20deg);

したがって、20度に回転します。

次に、マウスホイールで、左下から右上にスクロールします。

マウスホイールを使用しているそのimの場合：

$(window).mousewheel(function(event, delta, deltaX, deltaY){
   if(delta == -1) //Scrolling Down

   else //Scrolling Up
})

しかし、私はそれが次のようにインクリメントするための正しい属性と上位の属性を計算する方法がわかりません：

$(".img_prlx").stop(true,true).animate({'left': '+='+x+'px', 'top': '-='+y+'px'}, 2);

これまで私はこの式を試しましたが、それは私を助けませんでした：

var dist = 20;
var angle = 20;
var x = Math.cos(angle*Math.PI/180) * dist;
var y = Math.sin(angle*Math.PI/180) * dist;

だから私の目標はこのサイトからの効果を達成することです：http ：//www.nike.com/jumpman23/aj2012/

4

2 に答える 2

4

コンテナを回転させることなく、スクロールしたい場所に要素を移動させることができます。要素を左から同じ量だけ移動して、スクロール時に上に移動します。

ここでいくつかの効果の簡単な例を作成しました：http：//jsfiddle.net/T46XJ/

于 2012-08-17T08:35:37.103 に答える
2

既存のコードと提供したプラグインを使用して、これは斜めスクロールを実現するために使用できる1つの方法です。

http://jsfiddle.net/kFZ4T/7/

var angle = 45;   // Set the angle

$(window).mousewheel(function(event, delta, deltaX, deltaY){

    var x = Math.cos(angle*Math.PI/180) * delta;
    var y = Math.sin(angle*Math.PI/180) * delta;

    // Downward scroll = left,  Upward scroll = right
    $(".img_prlx").stop(true,true).animate({'left': '+='+x+'px', 'top': '-='+y+'px'}, 2);
});

最後の行を変更するだけで方向を変えることができます。たとえば、に変更leftするrightと方向が逆になり、上向きのスクロールが左に移動し、下向きのスクロールが右に移動します。

  $(".img_prlx").stop(true,true).animate({'right': '+='+x+'px', 'top': '-='+y+'px'}, 2);

</ p>

于 2012-08-17T08:42:43.443 に答える