1

我有 24 张以不同角度拍摄的图像，它们代表物体的 3D 模型。我想向我的网站添加 180* 度旋转功能，如示例 对象应使用滚动条“旋转”，如示例所示。另外，我必须为一些图像添加热点。

我怎样才能做到这一点？

4

1 回答 1

4

因为你有很多角度的图像，听起来你可以在没有 3D CSS 转换的 jQuery 中做到这一点。

加载所有图像并给它们不同id的：

<div id="3dview">
  <img src="..." id="angle1" style="display:block;" /> <!-- display this first -->
  <img src="..." id="angle2" />

  <img src="..." id="angle24" />
</div>

使用 CSS 声明position: absolute（与topand一起left）确保它们都显示在彼此之上。确保display:none默认情况下它们是隐藏的（即 ）。您可以只显示一张图像来显示初始角度。

#3dview img {
    position:absolute;
    top:0;
    left:0;
    display:none;
}

然后，在 JavaScript 中，您可以连接一个滑块控件，可能来自 jQuery UI，并显示一个特定<img />元素（同时隐藏所有其他元素）。您需要监听来自控件的事件，例如：

$( ".selector" ).on( "slidechange", function( event, ui ) { /* code here */} );

我建议从两个按钮开始，“向左旋转 1 步”和“向右旋转 1 步”。这将寻找唯一的img:visible，隐藏它，选择它的下一个/上一个兄弟，然后显示它。

// code to display the next image (ie 'rotate' by one step)
$("#3dview img:visible").hide().next().show()

您可能需要检查用户是否在第一个或最后一个视图上并更改行为，循环或停止旋转。您可以尝试仅链接:not(:last-child):not(:first-child)上面的选择器。

于 2013-08-08T07:52:40.217 回答