编程 Javascript

js实现图片360度旋转

Posted in Javascript onJanuary 22, 2017

大致介绍

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

效果：

js实现图片360度旋转

思路

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

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

- Author -

老板丶鱼丸粗面

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript SHA-1：Secure Hash Algorithm

Dec 20 Javascript

对YUI扩展的Gird组件 Part-2

Mar 10 Javascript

从零开始学习jQuery (十) jQueryUI常用功能实战

Feb 23 Javascript

JS二维数组的定义说明

Mar 03 Javascript

jQuery动态改变多行文本框高度的方法

Sep 07 Javascript

HTML中setCapture、releaseCapture 使用方法浅析

Sep 25 Javascript

Angular1.x复杂指令实例详解

Mar 01 Javascript

EasyUI为Numberbox添加blur事件的方法

Mar 05 Javascript

Node.js之网络通讯模块实现浅析

Apr 01 Javascript

Angular.js实现动态加载组件详解

May 28 Javascript

vue-cli构建项目下使用微信分享功能

May 28 Javascript

小程序实现长按保存图片的方法

Dec 31 Javascript

Vue 过渡（动画）transition组件案例详解

Jan 22 #Javascript

BootstrapTable请求数据时设置超时(timeout)的方法

Jan 22 #Javascript

boostrapTable的refresh和refreshOptions区别浅析

Jan 22 #Javascript

Ajax跨域实现代码(后台jsp)

Jan 21 #Javascript

JavaScript、C# URL编码、解码总结

Jan 21 #Javascript

Vue结合原生js实现自定义组件自动生成示例

Jan 21 #Javascript

jQuery基于正则表达式的表单验证功能示例

Jan 21 #Javascript