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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
js控制div及网页相关属性的代码
Dec 19 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 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
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
初识PHP
2014/09/28 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
wxpython实现图书管理系统
2018/03/12 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python