仅使用 javascript 旋转产品图像答案

【问题标题】：rotating a product image with javascript only仅使用 javascript 旋转产品图像
【发布时间】：2010-07-26 21:23:41
【问题描述】：

我刚刚浏览了苹果 iphone 4 画廊，偶然发现了新 iphone 的 360° 视图（请参阅http://www.apple.com/iphone/gallery/，单击缩略图视图左侧的第 4 个图像）。首先，我认为这将是一个可以让您旋转 iphone 图像的 Flash 电影，但当我用 firebug 检查它时，我发现那只是用 javascript 增强的普通 html。当我移动鼠标时，javascript 会更改图像 src。我浏览了包含的 javascript 文件，但很快就放弃了，因为它们都被缩小了并且不是真正可读的。

所以我的问题是：你如何在 javascript 中做到这一点？是否有一个流行的 javascript 库插件可以通过使用 html、javascript 和从各个角度拍摄的产品照片来实现产品的 360° 视图？

【问题讨论】：

标签： javascript html

【解决方案1】：

我们在这里：http://www.mathieusavard.info/threesixty/demo.html

【讨论】：

它看起来像是在 Apple 网站上使用 Scriptaculous 完成的，但效果相同 - 非常好。
我应该知道 jquery 有一些东西。 ;) 相当不错，虽然苹果版有一种“更流畅”的感觉。当然这也是因为苹果使用了更好的准备图像。
没错，Apple 的演示有 180 张图片，这就是它看起来如此流畅的原因

【解决方案2】：

旋转的脚本在vr.js，但是比较复杂。

【讨论】：

不仅复杂，它还被压缩了！

【解决方案3】：

如果您正在寻找一种不涉及大量图像且适用于 IE7 及更高版本的纯 CSS 技术，请查看以下示例：

【讨论】：