实现这样的效果,其原理和拍电影一样,就是一帧一帧连续起来,只不过电影是自己一直在放映,而我们的“电影”(展示的物体)是要用户自己通过鼠标的拖动来实现“放映”。
准备工作,首先需要一个物体的模型,然后把这个物体沿需求方向,进行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.onload=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.onload=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.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-x;
clearInterval(timer);
document.onmousemove=function (ev)
{
var oEvent=ev||event;
x=disX-oEvent.clientX;
move();
return false;
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=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>