如何在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中对平行四边形进行动画处理

回答

相关问题