之前学习JavaScript过程中，视频中学习的一个360度全景展示的实例。
可能比较简单，算是对之前学习的一个熟悉吧！
该应用通过拖拽可以展现物品的360度
1.开发前需要的图片
2.源码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload = function() {
var x=0;
var oImg = document.getElementById('img1');
var aImg = document.getElementsByTagName('img');
var oLastImg = oImg;
var i = 0;
var iSpeed = 0;
var lastX = 0;
var timer = null;
//图片缓存
for( i=1; i<77; i++) {
(function(oNewImg){
var oImg = new Image();
oImg.onload = function() {
oNewImg.src = this.src;
}
oImg.src = "img/miaov ("+ i +").jpg";
oNewImg.style.display = 'none';
document.body.appendChild(oNewImg);
})(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 = oEvent.clientX-disX;
move();
//oImg.src = "img/miaov ("+ l +").jpg";
iSpeed = x-lastX;
lastX = x;
document.title = iSpeed;
return false;
}
//事件绑定
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
timer = setInterval(function(){
x+=iSpeed;
move();
//oImg.src = "img/miaov ("+ l +").jpg";
}, 30);
}
return false;
}
//实现图片的旋转
function move(){
if(iSpeed>0) {
iSpeed--;
} else if(iSpeed<0) {
iSpeed++;
}
if(iSpeed ==0) {
clearInterval(timer);
}
var l=parseInt(-x/10);
if(l>0) {
l = l%77;
} else {
l=l+-Math.floor(l/77)*77;
}
if(oLastImg != aImg[l]) {
oLastImg.style.display = 'none';
aImg[l].style.display = 'block';
oLastImg = aImg[l];
}
}
}
</script>
</head>
<body>
<img src="img/miaov (0).jpg" id="img1" />
</body>
</html>