原生Js封装的产品图片360度展示

最新推荐文章于 2022-07-15 12:31:39 发布

noxLiu

最新推荐文章于 2022-07-15 12:31:39 发布

阅读量1.2k

点赞数

分类专栏： js

js 专栏收录该内容

75 篇文章 1 订阅

订阅专栏

挺简单的一段程序，但是效果不错：

1.把需要展示的36张图片先预加载到浏览器缓存里

2.给展示图片的div添加方法

3.通过鼠标左右移动的像素转换图片

在线效果预览：http://jsfiddle.net/dtdxrk/SnSGj/embedded/result/

<!DOCTYPE html>
 <html>
 <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>原生Js产品图片360度展示</title>
       <style type="text/css">
      *{margin: 0;padding: 0}

      h1{background-color: #666;color: #fff;text-align: center;margin:10px;}
      #content{margin:10px;border: 5px solid #666;text-align: center;}

     </style>
 </head>

 <body>
  <h1>鼠标左键点击图片-并左右移动</h1>
 <div id="content">
    <img id="car" src="http://images.cnitblog.com/blog/150659/201307/30094341-d352147c67e844c18c302810804efea0.gif" />
 </div>


<script type="text/javascript">
var _CalF = {
   $ : function(object){//选择器
     if(object === undefined ) return;
     var getArr = function(name,tagName,attr){
           var tagName = tagName || '*',
               eles = document.getElementsByTagName(tagName),
               clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
               attr = attr || clas,
               Arr = [];
           for(var i=0;i<eles.length;i++){
             if(eles[i].getAttribute(attr)==name){
               Arr.push(eles[i]);
             }
           }
           return Arr;
         };
   
     if(object.indexOf('#') === 0){  //#id 
       return document.getElementById(object.substring(1));
     }else if(object.indexOf('.') === 0){  //.class
       return getArr(object.substring(1));
     }else if(object.match(/=/g)){  //attr=name
       return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
     }else if(object.match(/./g)){ //tagName.className
       return getArr(object.split('.')[1],object.split('.')[0]);
     }
   },
   addHandler:function(node, type, handler){
       node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
   }
 };



function show360(){
  this.init.apply(this, arguments);
}

show360.prototype = {
  init:function(id,src){
      var divId = "#"+id,
          div = _CalF.$(divId);
      this.div = div;
      this.src = src;
      this.xDown; //鼠标按下x的值
      this.isDown = false;
      this.i = 1;
      this.moved;
      this.time;
      this.loadImg();
      this.addEvent();
  },
  setImgSrc : function(i){
    var img = this.div.getElementsByTagName("img")[0];
    img.setAttribute('src',this.src+i+'.png');
  },
  loadImg : function(){ //加载图片
    var that = this,
        num = 1,
        imgs =[];
    for(var i=1; i<37; i++){
        imgs[i] = new Image;
        imgs[i].src = that.src + i + '.png';
        imgs[i].onload = function(){
          num++;
          if(num==37) that.setImgSrc(1);
        }
    }
  },
  addEvent : function(){
    var that = this,
        div = that.div;

    _CalF.addHandler(div,"mousedown",function(event){
      var event = window.event || event;
      if(event.button == 0 ||event.button==1){  //鼠标左键chrome=0 ie=1
        (!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为
        that.xDown = event.clientX;
        that.isDown = true;
      }else if(event.button == 2){
        alert("请用鼠标左键!");
      }
    });

    _CalF.addHandler(div,"mousemove",function(event){
      var event = window.event || event,
          x = event.clientX;
      (!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为
      if(that.isDown && (typeof that.time !== undefined)){
        that.time = setTimeout(function(){
          that.moved = x - that.xDown;
          if(that.moved>15){
            that.i++;
            if(that.i>36) that.i=1;
          }else if(that.moved<-15){
            that.i--;
            if(that.i<1) that.i=36;
          }else{
            return;
          }
          that.setImgSrc(that.i)
          that.xDown = x;
        },50);
      }
    });

    _CalF.addHandler(div,"mouseup",function(){
      that.isDown = false;
    });
  }
}
var car = new show360("content","http://sandbox.runjs.cn/uploads/rs/369/vuy2vmwn/car_");
</script>
 </body>
 </html>

noxLiu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生Js封装的产品图片360度展示

挺简单的一段程序，但是效果不错：1.把需要展示的36张图片先预加载到浏览器缓存里2.给展示图片的div添加方法3.通过鼠标左右移动的像素转换图片在线效果预览：http://jsfiddle.net/dtdxrk/SnSGj/embedded/result/ 原生Js产品图片360度展示 *{marg
复制链接

扫一扫