做一个360度的全景展示功能
2016-12-04 本文已影响14人
话少为环保
原理比较简单：把一组的拍摄好了的360度的全景图，通过鼠标的移动不停的去显示和隐藏图片。
2016-12-04_02-03-06.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>360全景显示</title>
<style>
img {
/*background:red;*/
position: absolute;
left:200px;
top:100px;
}
</style>
<script>
window.onload = function() {
var x = 0; // 偏移量
var oImg = document.getElementById('img1');
var aImg = document.getElementsByTagName('img');
var olastImg = oImg;
var lastX = 0;
var ispeed = 0;
var timer = null;
for(var i = 1;i < 77; i++) {
var oNewImg = document.createElement('img');
oNewImg.src = "img/miaov (" + i + ").jpg"
oNewImg.style.display = 'none';
document.body.appendChild(oNewImg);
}
document.onmousedown = function (ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - x;
document.onmousemove = function (ev) {
var oEvent = ev || event;
x = oEvent.clientX - disX;
var l = parseInt(-x/10);
move();
ispeed = x - lastX;
lastX = x;
return false;
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
timer = setInterval(function() {
x+= ispeed;
move();
},30);
};
}
function move() {
if (ispeed > 0) {
ispeed--;
}else{
ispeed++;
}
if (ispeed == 0) {
clearInterval(timer);
}
var l = parseInt(-x/10);
if (l > 0) {
var l = l%77;
}else {
var l = l + -(Math.floor(l/77)*77);
}
// oImg.src = "img/miaov (" + l + ").jpg";
// document.title = x;
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" alt="">
</body>
</html>
