360度全景图片 

<!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 oImg=document.getElementById('img1');
	var aImg=document.getElementsByTagName('img');
	var oLastImg=oImg;
	var lastX=0;
	var iSpeed=0;
	var timer=null;
	var i=0;
	
	for(i=1;i<77;i++)
	{
		(function (oNewImg){
			var oImg=new Image();
			
			oImg.onload=function ()
			{
				oNewImg.src=this.src;
			};
			oImg.src='img/1 ('+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();
			
			iSpeed=x-lastX;
			lastX=x;
			
			//oImg.src='img/1 ('+l+').jpg';
			
			return false;
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
			
			document.title=iSpeed;
			
			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)
			{
				l=l%77;
			}
			else
			{
				l=l+-Math.floor(l/77)*77;
			}
			
			document.title=iSpeed;
			
			if(oLastImg!=aImg[l])
			{
				oLastImg.style.display='none';
				aImg[l].style.display='block';
				oLastImg=aImg[l];
			}
		}
		
		return false;
	};
};
</script>
</head>

<body>
<img id="img1" src="img/1(0).jpg" />
</body>
</html>

　style.css

body {margin:0;}
img {width:640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;}
#bg {width:100%; height:100%; position:absolute; left:0; top:0; filter:alpha(opacity:60); opacity:0.6; background:black; z-index:1;}
#prog {width:324px; height:40px; background:url(img/bar.png) no-repeat 0 bottom; position:absolute; z-index:2; top:50%; left:50%; margin:-20px 0 0 -162px; font-family:arial; font-size:12px; color:#fff; text-align:center;}
#prog span {font-family:"宋体";}
#bar {width:0%; height:16px; background:url(img/bar_line.gif) repeat-x; overflow:hidden; position:absolute; bottom:2px; left:2px;}

　　

posted @ 2017-10-19 11:35  陌小江  阅读(176)  评论(0)    收藏  举报