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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
前端性能优化及技巧
May 06 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
Vue声明式渲染详解
May 17 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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
You might like
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
使用p5.js临摹动态图片
2019/11/04 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
Python深入学习之闭包
2014/08/31 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
简单实现python画圆功能
2018/01/25 Python
基于Django用户认证系统详解
2018/02/21 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
成教自我鉴定
2013/10/27 职场文书
学校安全工作制度
2014/01/19 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
初中学生评语大全
2014/04/24 职场文书
投资意向书
2014/07/30 职场文书
英文商务邀请函范文
2015/01/31 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
css height属性中的calc方法详解
2021/06/03 HTML / CSS
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
bat批处理之字符串操作的实现
2022/03/16 Python