首页 > 代码库 > 3d旋转实例
3d旋转实例
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="http://www.mamicode.com/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;//标志显示当前的img16 //图片优化性能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=http://www.mamicode.com/this.src; 24 };25 oImgs.src=http://www.mamicode.com/‘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=http://www.mamicode.com/‘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="http://www.mamicode.com/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>
3d旋转实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。