3

我在正确的方向上滚动平行四边形时遇到麻烦，因为我不擅长三角学。

我有一个DIV带有 css 属性的：-webkit-transform: rotate(20deg);

所以它被旋转成20度。

现在在鼠标滚轮上，我想将其从 Bottom-Left 滚动到 Top-Right Direction 。

对于那个我使用鼠标滚轮：

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

   else //Scrolling Up
})

但我不知道如何计算它的 Right 和 Top Attributes to Increment Like ：

$(".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

使用您现有的代码和您提供的插件，这是您可以用来实现对角滚动的一种方法。

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 回答