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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
给Javascript数组插入一条记录的代码
Aug 30 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
Python3基础之基本数据类型概述
2014/08/13 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
关于Assembly命名空间的三个面试题
2015/07/23 面试题
给幼儿园老师的表扬信
2014/01/19 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
借款协议书
2014/04/12 职场文书
跳蚤市场口号
2014/06/13 职场文书
大学英语专业求职信
2014/06/21 职场文书
结婚司仪主持词
2015/06/29 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
pytorch 如何使用float64训练
2021/05/24 Python
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android