▓▓▓▓▓▓ 大致介绍

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

　　效果：

▓▓▓▓▓▓ 思路

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

　　由于效果是根据鼠标的移动距离来操作的，即移动的像素值。如果按照默认的情况，移动鼠标的时候图片就旋转的太快了，所以我们要给鼠标移动的距离处以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. 提示：ArcGIS version not specified. You must call RuntimeManager.Bind before creating any ArcGIS components.错误

    ArcGIS10,然后就使用VS创建一个简单的AE应用程序,然后拖放一个toolbar.LicenseControl以及MapControl控件. 接着编译应用程序,编译成功. 然后单击F5运行程序, ...

  2. ural1126 Magnetic Storms

    Magnetic Storms Time limit: 0.5 secondMemory limit: 64 MB The directory of our kindergarten decided ...

  3. Moocryption

    Moocryption 题目描述 Unbeknownst to many, cows are quite fond of puzzles, particularly word puzzles. Far ...

  4. acm--统计错误数

    题目描述 题目地址:http://www.nowcoder.com/practice/67df1d7889cf4c529576383c2e647c48?tpId=49&tqId=29276&a ...

  5. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  6. phpcms v9 后台首页 去掉团队信息等版权

    phpcms\languages\zh-cn\admin.lang.php $LANG['main_product_team'] = 'PHPCMS开发团队'; phpcms\modules\admi ...

  7. eclipse中安装配置maven

    1.首先说一下在windows中安装maven.非常简单... 到http://maven.apache.org/download.html中下载maven,截止笔者发文时,maven最新版本为mav ...

  8. ios开发获取SIM卡信息

    .加入一个Framework(CoreTelephony.framework). .引入头文件 #import<CoreTelephony/CoreTelephonyDefines.h> ...

  9. NSString的几个方法（rangeOfString，hasPrefix，hasSuffix，改变大小写...）

    - (NSRange)rangeOfString:(NSString *)searchString;//查找字符串中是包涵在某个字符串,并返回其开始位置和长度 例: NSRange range = [ ...

  10. Codeforces#355

    大小号刷题,大号,被查重,悲剧,最后小号过了3题 A题: 分析:大于h的+2,小于等于h的+1 #include <iostream> #include <cstdio> #i ...