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

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="https://images0.cnblogs.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>

原生Js封装的产品图片360度展示的更多相关文章

  1. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  2. threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示

    最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider ...

  3. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  4. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  5. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  6. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  7. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  8. 原生js封装十字参考线插件(一)

    需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...

  9. 通过CSS3实现：鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

随机推荐

  1. 数据库版本管理工具Flyway——基础篇

    Flyway 默认规约 SQL 脚本文件默认位置是项目的源文件夹下的db/migration 目录. Java 代码默认位于db.migration 包. SQL 脚本文件及Java 代码类名必须遵循 ...

  2. GridLayout网格布局

    网格布局特点: l  使容器中的各组件呈M行×N列的网格状分布. l  网格每列宽度相同,等于容器的宽度除以网格的列数. l  网格每行高度相同,等于容器的高度除以网格的行数. l  各组件的排列方式 ...

  3. Java类、实例的初始化顺序

    今晚是阿里巴巴 2013 校园招聘的杭州站笔试.下午匆忙看了两张历年试卷,去现场打了瓶酱油. 题目总体考察点偏基础,倒数第二题(Java 附加题)比较有趣,考察了 Java 初始化机制的细节,在此摘录 ...

  4. Java8推出各种优惠（从英文文档翻译）

    翻译了一天.最终把翻译任务的"Java 8全部的包介绍"翻译完了,收获也是很大,了解了Java8中全部包的作用,对Java8有了一个总体的了解,另外也是提高了自身的阅读能力. ht ...

  5. 为 Mac Finder 增加右键文件打包压缩（免费）

    在 Windows 上用惯了 7-Zip 和 WinRAR,来到 Mac 却突然发现没有类似的工具?Mac 自带的 Zip 工具确实让人吐糟无力,压缩率低就不说了,因为 Mac 上文件名是 Unico ...

  6. arcserver开发小结（一）

    一.关于属性查询 由于要做属性查询,又重新玩起了arcmap中的select by attribute,有很多自己当初玩弄arcmap多年还不是很清楚的东西 1,字段名 (1)file geodata ...

  7. WPF 实现跑马灯效果的Label控件，数据绑定方式实现

    原文:WPF 实现跑马灯效果的Label控件,数据绑定方式实现 项目中需要使用数据绑定的方式实现跑马灯效果的Label,故重构了Label控件:具体代码如下 using System; using S ...

  8. python 教程 第二十章、 数据库编程

    第二十章. 数据库编程 环境设置 1).安装MySQL-python http://www.lfd.uci.edu/~gohlke/pythonlibs/ MySQL-python-1.2.3.win ...

  9. VoIP应用在Ubuntu 14.04下编译FFmpeg libX264及PJSIP

    PJSIP是一个开源的SIP协议栈.它支持多种SIP的扩展功能,可说算是最目前流行的SIP协议栈之一了.  它实现了SIP.SDP.RTP.STUN.TURN和ICE.PJSIP作为基于SIP的一个多 ...

  10. C++中new和delete的背后（最后还是调用了MSVCR90的malloc）

    关于 C++中new背后的行为, 以前已经写过一篇了 理解C++中new背后的行为, 但是里面也只是泛泛而谈,没有真凭实据, 下面我们从汇编的角度看C++编译器究竟在背后干了什么?   我们的代码很简 ...