标签：style blog http io ar color sp for on
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <link rel="stylesheet" type="text/css" href="style.css" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>无标题文档</title> 7 <script> 8 window.onload=function () 9 { //拖着虚拟的点转动,虚拟点不设置y点，是因为不想让在Y轴上还运动 10 var x=lastX=0; 11 var iSpeed=0; 12 var timer=null; 13 var oImg=document.getElementById("img1"); 14 var aImg=document.getElementsByTagName(‘img‘); 15 var oLastImg=oImg;//标志显示当前的img 16 //图片优化性能 17 for(var i=0; i<77; i++) { 18 //(fn(param))(sparam); 19 (function(oNewImg) { 20 var oImgs=new Image(); 21 //var oNewImg=document.createElement(‘img‘); 22 oImgs.onload=function() { 23 oNewImg.src=this.src; 24 }; 25 oImgs.src=‘img/miaov (‘+i+‘).jpg‘; 26 oNewImg.style.display=‘none‘; 27 document.body.appendChild(oNewImg); 28 })(document.createElement(‘img‘)); 29 } 30 31 document.onmousedown=function(ev) { 32 clearInterval(timer); 33 var oEvent=ev||event; 34 var disX=oEvent.clientX-x; 35 document.onmousemove=function(ev) { 36 oEvent=ev||event; 37 x=oEvent.clientX-disX; 38 move(); 39 iSpeed=x-lastX; 40 lastX=x; 41 //oImg.src=‘img/miaov (‘+l+‘).jpg‘; 42 return false;//解决ie的默认事件 43 }; 44 document.onmouseup=function() { 45 document.onmousemove=null; 46 document.onmouseup=null; 47 timer=setInterval(function(){ 48 x+=iSpeed; 49 move(); 50 }, 30); 51 }; 52 53 function move() { 54 if(iSpeed>0) 55 iSpeed--; 56 else 57 iSpeed++; 58 var l=parseInt(-x/10); 59 //拖动10个像素，图片旋转 60 if(iSpeed==0) { 61 clearInterval(timer); 62 } 63 if(l>0) 64 l=l%77; 65 else 66 l=l+Math.floor(l/77)*77*(-1); 67 //图片优化性能 68 if(oLastImg!=aImg[l]) { 69 oLastImg.style.display=‘none‘; 70 aImg[l].style.display=‘block‘; 71 oLastImg=aImg[l]; 72 } 73 } 74 return false;//禁止默认事件ff/chrome支持，，ie不支持 75 }; 76 }; 77 </script> 78 </head> 79 80 <body> 81 <img id="img1" src="img/miaov (0).jpg" /> 82 <!--<div id="bg"></div> 83 <div id="prog"> 84 360度全景展示 载入中......<span>0%</span> 85 <div id="bar"></div> 86 </div>--> 87 </body> 88 </html>
标签：style blog http io ar color sp for on
原文地址：http://www.cnblogs.com/codc-5117/p/4143925.html
