原生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>

 

 

posted @ 2013-07-22 11:03  dtdxrk  阅读(826)  评论(0)  编辑  收藏  举报