我开始开发一个广泛使用 javascript 的单页网站。该网站的主要目的是推广我的客户的产品。该网站将包含一张产品 3D 图像。当用户单击并拖动时，它应该相应旋转。请参阅下面的链接。我需要与以下链接中提到的完全相同的效果
单击此处获取链接
如何使用 javascript 实现此目的而不使用magic 360？请给我一些文章或教程链接，因为我搜索但找不到任何相关教程。
这是我刚刚拼凑在一起的一些 JavaScript。选择一个预构建的库（用于浏览器兼容性等），但是当您有机会深入了解实际发生的情况时。note我在答案提交表单中写了此内容，因此可能存在语法和其他错误
<!-- an empty div to hold your images / frames -->
<div id="view3d"></div>
...
<script>
(function() {
// setup
var viewer = document.getElementById("view3d");
var name = "3d Boat";
var frameUri = "/images/demo3d.#.jpg";
var frameStart = 1;
var frameEnd = 100;
// setup the html IMG's
for(var i=frameStart; i<=frameEnd; i++) {
var img = document.createElement("img");
img.src = frameUri.replace("#", i);
img.alt = name;
img.style.display = "none";
viewer.appendChild(img);
}
// persisted variables and events
var that = this;
this.rotateX = 0;
this.isRotating = false;
this.frames = viewer.getElementsByTagName("img");
this.frameIdx = 0;
this.pixelsPerFrame = viewer.offsetWidth / (frames.length / 2);
function rotateMouseUp() { isRotating = false; };
function rotateMouseDown(event) {
mouseX = event.pageX;
isRotating = true;
};
function rotateMouseMove(event) {
if(!this.isRotating)
return;
var x = event.pageX;
var delta = this.rotateX - x;
if(delta >= this.pixelsPerFrame) {
this.rotateX = x;
this.frames[this.frameIdx].style.display = 'none';
this.frameIdx = (this.frameIdx + parseInt(delta / pixelsPerFrame)) % this.frames.length;
this.frames[this.frameIdx].style.display = '';
}
}
viewer.onmousedown = rotateMouseDown.bind(that);
viewer.onmouseup = rotateMouseUp.bind(that);
viewer.onmousemove = rotateMouseMove.bind(that);
// show the first image
this.frames[this.frameIdx].style.display = '';
})();
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
