我想做一个3D效果,和这个网站一样http://www.asianimedia.com/
但我需要它在 jquery 中,而不是在 flash 中。
我尝试过 JQUERY 3D 引擎,通过使用这个库我可以做类似的事情,但我需要 99% 相同,但目前我无法做到
谁能告诉我该怎么做?或者有没有更好的3D库
这是我目前使用的 3D 引擎 http://www.devirtuoso.com/2009/09/3d-plane-for-jquery-3d-engine/
最佳答案
好吧,所以只使用 jQuery(没有 css 转换,这意味着它应该非常兼容),我想出了以下内容:
http://jsfiddle.net/andyc/ZncP6/
var numOfBoxes = 10;
var boxContainer = $(".boxcontainer");
var gap = 360 / (numOfBoxes);
for (var i = 0; i < numOfBoxes; i++) {
$("<div>").attr("data-offset", (gap * i)).addClass("box").appendTo(boxContainer);
}
$(".box").each(function() {
var box = $(this);
positionBox(box, 0);
});
$({position: 0}).animate({position: 360}, {
duration: 4000,
step: function() {
var currentPosition = this.position;
console.log(currentPosition);
$(".box").each(function() {
var box = $(this);
positionBox(box, currentPosition);
});
}
});
function positionBox(box, position) {
var newPosition = position + box.data("offset");
var newRadianPosition = convertToRadians(newPosition);
var x = Math.cos(newRadianPosition) * 200 + 200;
var y = Math.sin(newRadianPosition) * 100 + 200;
var absolutePosition = newPosition % 360;
if (absolutePosition > 180) {
box.css("z-index", "0");
}
else {
box.css("z-index", "");
}
// Could scale the size of the item here as well as position
box.css("top", y + "px").css("left", x + "px");
}
function convertToRadians(degrees) {
return degrees * (3.14159265 / 180);
}
它有点粗糙和准备就绪,所以显然您希望根据您的需要对其进行定制。实际上,它所做的是创建一个自定义 jQuery 动画,每一步都会递增并重新定位中心 div 周围的小 div。如果它们在中间,它的 z 索引就会改变,从而产生深度的错觉。
如果您希望它看起来更真实一点,您可以随时根据 div 与字体的接近程度来调整它们的大小。
这有帮助吗?
如果您需要更多解释,请告诉我! :) 塔!
关于javascript - Jquery 3D 戒指,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10845633/