▓▓▓▓▓▓ 大致介绍

　　这次是一个简单的效果，就是思路的问题

　　效果：

▓▓▓▓▓▓ 思路

　　旋转的效果就是根据鼠标的的移动距离来显示不同的图片，形成视觉差，仿佛就是在正真的旋转

　　由于效果是根据鼠标的移动距离来操作的，即移动的像素值。如果按照默认的情况，移动鼠标的时候图片就旋转的太快了，所以我们要给鼠标移动的距离处以15，降低图片的旋转速度。

                 var l = parseInt(-x/15);

　　有一个问题是在鼠标向左移动的时候，移动的距离是负的。要想正确的显示图片，就要对负值进行处理。例如-1，图片要显示最后一张即72张（图片一共有72张）。-100时要显示第44张图片，但是由于图片的命名是从1开始的，而不是从0开始的，所以要在最后加1

                 var l = parseInt(-x/15);

                 if(l > 0){

                     l = l%72+1;

                 }else{

                     l = (l + -72*(Math.floor(l/72))) + 1;

                 }

▓▓▓▓▓▓ 代码

     <style>

     html,body {height:100%;}

     body {margin:0;}

     img{

         width: 640px;

         height: 378px;

         position: absolute;

         left: 50%

         top: 50%;

         margin-top:120px;

         margin-left:320px;

     }

     </style>

     <script>

     window.onload = function(){

         var x = 0;

         var oImg = document.getElementById('img1');

         document.onmousedown = function(ev){

             var  ev = ev || enent;

             var disX = ev.clientX - x;

             document.onmousemove = function(ev){

                 var ev = ev || event;

                 x = ev.clientX - disX;

                 var l = parseInt(-x/15);

                 if(l > 0){

                     l = l%72+1;

                 }else{

                     l = (l + -72*(Math.floor(l/72))) + 1;

                 }

                 oImg.src = "img/Seq_v04_640x378_"+ l +".jpg"

                 return false;

             };

             document.onmouseup = function(){

                 document.onmouseup = null;

                 document.onmousemove = null;

             }

             return false;

         }

     }

     </script>

 </head>

 <body>

 <div class="img_wrap">

     <img id="img1" src="img/Seq_v04_640x378_1.jpg" >

 </div>

 </body>

js实现360度图片旋转的更多相关文章

  1. 360度3D 旋转插件

    Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...

  2. html5人物图片360度立体旋转

    体验效果:http://hovertree.com/texiao/html5/10.htm 下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm 代码如下: ...

  3. HTML实现图片360度循环旋转

    <style> .header{ -webkit-animation:rotateImg 5s linear infinite;<!--修改旋转周期--> border: 1p ...

  4. Three.js制作360度全景图

    这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"> ...

  5. 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js  ---------------------------------------- 1.能添加热点: 2.能调用陀 ...

  6. JS+CSS3 360度全景图插件 - Watch3D.js

    日常闲扯 从上一篇文章到这篇中间快过了一年了,时间真滴过得快.不是在下中间没想过写新的文章,而是自己确实变懒了(体重+1 +1 +1 +1....) ..OTL...不过到最后觉得还是需要写点东西,不 ...

  7. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  8. C# 图片旋转360度程序

    这几天开发一个程序,需要将一个图片旋转360度然后每一个角度保存下来.刚开始本来想着是让美工弄的,但是让一个美工手动转360度,她会喷你一脸. using System; using System.C ...

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

    挺简单的一段程序,但是效果不错: 1.把需要展示的36张图片先预加载到浏览器缓存里 2.给展示图片的div添加方法 3.通过鼠标左右移动的像素转换图片 在线效果预览:http://jsfiddle.n ...

随机推荐

  1. 改变MyEclipse创建JSP时默认的pageEncoding编码

    如何改变MyEclipse创建JSP时默认的pageEncoding编码 有时我们需要改变MyEclipse创建JSP时默认的pageEncoding编码,因为也许它默认的编码不是我们想要的,比如我们 ...

  2. background系列属性

    1.background-color背景颜色属性 ①颜色表示方法 英语单词:red   blue   purple    skyblue. rgb:r代表红色   g代表绿色   b代表蓝色    也 ...

  3. CodeForces 617E XOR and Favorite Number

    莫队算法. #include<cstdio> #include<cmath> #include<cstring> #include<algorithm> ...

  4. Firebug 非常好用

    chrome 浏览器 火狐 直接获取网页中传输的数据

  5. cron 编辑器修改

    更改 cron 默认编辑工具 Debian 的 crontab 默认的编辑器是 nano,用起来很不习惯,怎么才能转回 VI 呢? 用如下命令即可: #update-alternatives --co ...

  6. MYSQL-group_concat设置group_concat_max_len

    MySQL提供的group_concat函数可以拼接某个字段值成字符串,如 select group_concat(user_name) from sys_user,默认的分隔符是 逗号,即" ...

  7. iOS通过代码关闭程序

    //-------------------------------- 退出程序 -----------------------------------------// - (void)exitAppl ...

  8. Session监听事件的处理

    设置Session监听  在web.xml文件中: <listener> <listener-class>cjq.login.listener.UpdateLogOutTime ...

  9. UWP_小说在线阅读器：功能要求与技术要求

    学了WP开发也有一年了,也没做过什么软件的.17年进发UWP,锻炼自己一下.做一个开源的小说阅读器吧. 既然开发一个软件.所以要设计一下吧. 功能要求: 可能要用到的技术,这个吗,这就是遇到问题在解决 ...

  10. List学习笔记

    List 特点:1.有序.2.可重复. ArrayList: 底层是数组,数组是有下标的. 会自动扩容,底层默认初始化容量是10,扩大之后的容量预设是原来容量的一半(jdk 1.8).以前好像是原容量 ...