用javascript实现3d（水平或者垂直方向）展示物品

本文链接：https://blog.csdn.net/TruthK/article/details/79807034

实现这样的效果，其原理和拍电影一样，就是一帧一帧连续起来，只不过电影是自己一直在放映，而我们的“电影”（展示的物体）是要用户自己通过鼠标的拖动来实现“放映”。

准备工作，首先需要一个物体的模型，然后把这个物体沿需求方向，进行360度截图。图片最好大于60张，图片越多，拖动起来越顺滑。（我很懒，粗略地截了53张。）上代码：

css:

body {margin:0;}

img {width:640px;
    height:378px;
    position:absolute;
    left:50%; top:50%;
    margin-top:-189px;
    margin-left:-320px;}

html和js:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.οnlοad=function ()
{
	var x=0;
	//要展示的哪一张图片
	var origin_img=document.getElementById('show');
	//获取所有有关与要显示的物体的360度截图
	var array_img=document.getElementsByTagName('img');
	//last_img是最后显示的图片。
	var last_img=origin_img;
	var timer=null;
	var i=0;
    //这个for循环是为了在网页一开始就把所有的图片就加载，
    // 不然如果是要显示哪一张到时再加载，会使让物体一卡一卡。
	for(i=1;i<53;i++)
	{
     (function (new_img){
			var origin_img=new Image();

			origin_img.οnlοad=function ()
			{
				new_img.src=this.src;
			};
			origin_img.src='img/'+i+'.png';

			new_img.style.display='none';

			document.body.appendChild(new_img);//把新生成的img加入body
		})(document.createElement('img'));
	}

	document.οnmοusedοwn=function (ev)
	{
		var oEvent=ev||event;
		var disX=oEvent.clientX-x;

		clearInterval(timer);

		document.οnmοusemοve=function (ev)
		{
			var oEvent=ev||event;
			x=disX-oEvent.clientX;
			move();
			return false;
		};

		document.οnmοuseup=function ()
		{
			document.οnmοusemοve=null;
			document.οnmοuseup=null;

		};

		function move()
		{
		    //l是要显示图片的索引
			var l=parseInt(-x/10);
			if(l>0) {
				l=l%53;//正向移动
			}
			else {
				l=l+-Math.floor(l/53)*53;//反向
			}

            //当最后显示的图片和 将要显示的 不一时，last_img隐藏。
			if(last_img!=array_img[l])
			{
				last_img.style.display='none';
				array_img[l].style.display='block';
				last_img=array_img[l];
			}
		}

		return false;
	};
};
</script>
</head>

<body>
<img id="show" src="img/1.png" />
</body>
</html>