如何在jQuery中對平行四邊形進行動畫處理

我在滾動平行四邊形時遇到了問題，因爲我的三角函數不太好。如何在jQuery中對平行四邊形進行動畫處理

我與CSS屬性一個DIV：-webkit-transform: rotate(20deg);

所以它旋轉到度。

現在在鼠標滾輪上，我想從左下角滾動到右上角。

對於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/

來源

2012-08-17 Burimi

你使用鼠標滾輪的插件嗎？如果是這樣的話？ – Jeemusu 2012-08-17 08:16:48

@Jeemusu這一個https://github.com/brandonaaron/jquery-mousewheel/ – Burimi 2012-08-17 08:18:47

http://jsfiddle.net/kFZ4T/5/ <---這是你在找什麼？ – Jeemusu 2012-08-17 08:32:57

使用現有的代碼，你提供的，這是一個方法，你可以用它來實現角滾動的插件。

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);

來源

2012-08-17 08:42:43 Jeemusu

你可以讓東西移動到任何你想滾動的位置，而不必旋轉容器，只需將元素從左側移動到相同的位置當滾動。

製造的一些在這裏影響一個簡單的例子：http://jsfiddle.net/T46XJ/

來源

2012-08-17 08:35:37 adeneo

如何在jQuery中對平行四邊形進行動畫處理

回答

相關問題