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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
给js文件传参数(详解)
Jul 13 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
javascript求日期差的方法
Mar 02 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 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
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
jquery实现div阴影效果示例代码
2013/09/16 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python实现日常记账本小程序
2018/03/10 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
基于Python实现用户管理系统
2019/02/26 Python
Python实现最常见加密方式详解
2019/07/13 Python
详解python中eval函数的作用
2019/10/22 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
五好关工委申报材料
2014/05/31 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书