原生Js封装的产品图片360度展示
挺简单的一段程序，但是效果不错：
1.把需要展示的36张图片先预加载到浏览器缓存里
2.给展示图片的div添加方法
3.通过鼠标左右移动的像素转换图片
在线效果预览：http://jsfiddle.net/dtdxrk/SnSGj/embedded/result/
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>原生Js产品图片360度展示</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0} 8 9 h1{background-color: #666;color: #fff;text-align: center;margin:10px;} 10 #content{margin:10px;border: 5px solid #666;text-align: center;} 11 12 </style> 13 </head> 14 15 <body> 16 <h1>鼠标左键点击图片-并左右移动</h1> 17 <div id="content"> 18 <img id="car" src="//images0.cnblogs.com/blog/150659/201307/30094341-d352147c67e844c18c302810804efea0.gif" /> 19 </div> 20 21 22 <script type="text/javascript"> 23 var _CalF = { 24 $ : function(object){//选择器 25 if(object === undefined ) return; 26 var getArr = function(name,tagName,attr){ 27 var tagName = tagName || '*', 28 eles = document.getElementsByTagName(tagName), 29 clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6 30 attr = attr || clas, 31 Arr = []; 32 for(var i=0;i<eles.length;i++){ 33 if(eles[i].getAttribute(attr)==name){ 34 Arr.push(eles[i]); 35 } 36 } 37 return Arr; 38 }; 39 40 if(object.indexOf('#') === 0){ //#id 41 return document.getElementById(object.substring(1)); 42 }else if(object.indexOf('.') === 0){ //.class 43 return getArr(object.substring(1)); 44 }else if(object.match(/=/g)){ //attr=name 45 return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g))); 46 }else if(object.match(/./g)){ //tagName.className 47 return getArr(object.split('.')[1],object.split('.')[0]); 48 } 49 }, 50 addHandler:function(node, type, handler){ 51 node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler); 52 } 53 }; 54 55 56 57 function show360(){ 58 this.init.apply(this, arguments); 59 } 60 61 show360.prototype = { 62 init:function(id,src){ 63 var divId = "#"+id, 64 div = _CalF.$(divId); 65 this.div = div; 66 this.src = src; 67 this.xDown; //鼠标按下x的值 68 this.isDown = false; 69 this.i = 1; 70 this.moved; 71 this.time; 72 this.loadImg(); 73 this.addEvent(); 74 }, 75 setImgSrc : function(i){ 76 var img = this.div.getElementsByTagName("img")[0]; 77 img.setAttribute('src',this.src+i+'.png'); 78 }, 79 loadImg : function(){ //加载图片 80 var that = this, 81 num = 1, 82 imgs =[]; 83 for(var i=1; i<37; i++){ 84 imgs[i] = new Image; 85 imgs[i].src = that.src + i + '.png'; 86 imgs[i].onload = function(){ 87 num++; 88 if(num==37) that.setImgSrc(1); 89 } 90 } 91 }, 92 addEvent : function(){ 93 var that = this, 94 div = that.div; 95 96 _CalF.addHandler(div,"mousedown",function(event){ 97 var event = window.event || event; 98 if(event.button == 0 ||event.button==1){ //鼠标左键chrome=0 ie=1 99 (!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为 100 that.xDown = event.clientX; 101 that.isDown = true; 102 }else if(event.button == 2){ 103 alert("请用鼠标左键!"); 104 } 105 }); 106 107 _CalF.addHandler(div,"mousemove",function(event){ 108 var event = window.event || event, 109 x = event.clientX; 110 (!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为 111 if(that.isDown && (typeof that.time !== undefined)){ 112 that.time = setTimeout(function(){ 113 that.moved = x - that.xDown; 114 if(that.moved>15){ 115 that.i++; 116 if(that.i>36) that.i=1; 117 }else if(that.moved<-15){ 118 that.i--; 119 if(that.i<1) that.i=36; 120 }else{ 121 return; 122 } 123 that.setImgSrc(that.i) 124 that.xDown = x; 125 },50); 126 } 127 }); 128 129 _CalF.addHandler(div,"mouseup",function(){ 130 that.isDown = false; 131 }); 132 } 133 } 134 var car = new show360("content","http://sandbox.runjs.cn/uploads/rs/369/vuy2vmwn/car_"); 135 </script> 136 </body> 137 </html>
