js实现360度图片旋转

达人科技 2017-01-21 17:28

▓▓▓▓▓▓ 大致介绍

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

效果：

▓▓▓▓▓▓ 思路

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

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

1 var l = parseInt(-x/15);

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

1 var l = parseInt(-x/15);
2
3 if(l > 0){
4 l = l%72+1;
5 }else{
6 l = (l + -72*(Math.floor(l/72))) + 1;
7 }

▓▓▓▓▓▓ 代码

 1     <style>2     html,body {height:100%;}3     body {margin:0;}4     img{5         width: 640px;6         height: 378px;7         position: absolute;8         left: 50%9         top: 50%;
10         margin-top:120px;
11         margin-left:320px;
12     }
13
14     </style>
15     <script>
16     window.onload = function{
17
18         var x = 0;
19         var oImg = document.getElementById('img1');
20
21
22         document.onmousedown = function(ev){
23
24 var  ev = ev || enent;
25 var disX = ev.clientX - x;
26
27 document.onmousemove = function(ev){
28 var ev = ev || event;
29 x = ev.clientX - disX;
30
31 var l = parseInt(-x/15);
32
33 if(l > 0){
34 l = l%72+1;
35 }else{
36 l = (l + -72*(Math.floor(l/72))) + 1;
37  }
38
39 oImg.src = "img/Seq_v04_640x378_"+ l +".jpg"
40
41 return false;
42  };
43
44 document.onmouseup = function{
45 document.onmouseup = null;
46 document.onmousemove = null;
47  }
48
49 return false;
50         }
51
52     }
53     </script>
54 </head>
55 <body>
56 <div class="img_wrap">
57     <img id="img1" src="img/Seq_v04_640x378_1.jpg" >
58 </div>
59 </body>

js实现360度图片旋转相关推荐

360度商品展示html5,360度图片旋转产品预览展示js插件
这是一款360度图片旋转产品预览展示js插件.该360度图片旋转产品预览js插件提供多种控制产品图片旋转的方法,包括自动旋转,通过按钮来控制旋转,通过鼠标拖拽或鼠标移动来控制旋转,通过鼠标滚轮来控制旋 ...
css3循环360度图片旋转
上个效果图首先这是一张静态的 png图片是通过添加 CSS 样式让图片旋转起来的,不是GIF动态图! 代码如下: css: .noDataImg{-webkit-transform: rotate ...
html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...
HTML实现图片360度循环旋转
HTML实现图片360度循环旋转效果图 //css代码 .header{-webkit-animation:rotateImg 1s linear infinite;width: 80px ;hei ...
html实现360展示图片,js html5 360度全景图片预览效果
特效描述:js html5 360度全景图片预览效果.html5实现360度全景,html5 720度全景图,html5全景图,html5全景图源代码,html5 3d全景,360度全景图,3d36 ...
java全景图片切割全景,基于Three.js实现360度全景图片
Three.js 是一款运行在浏览器中的3D引擎, 处理三维效果.在一些相机的官网首页中,经常有一张图在旋转,图上面悬浮着文字.这种效果是如何做出来的呢?先看效果,再讲解. 1).建立一个java w ...
基于Three.js的360度全景图片
Three.js 是一款运行在浏览器中的 3D 引擎, 处理三维效果.在一些相机的官网首页中,经常有一张图在旋转,图上面悬浮着文字.这种效果是如何做出来的呢?先看效果,再讲解. 1).建立一个java ...
css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
CSS3旋转动画(360度旋转.旋转放大.放大.移动) 用法和实例 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explo ...
360度不停旋转动画-转圈圈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

js实现360度图片旋转

▓▓▓▓▓▓ 大致介绍

▓▓▓▓▓▓ 思路

▓▓▓▓▓▓ 代码

js实现360度图片旋转相关推荐

最新文章

热门文章