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度图片旋转的更多相关文章
- 360度3D 旋转插件
Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...
- html5人物图片360度立体旋转
体验效果:http://hovertree.com/texiao/html5/10.htm 下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm 代码如下: ...
- HTML实现图片360度循环旋转
<style> .header{ -webkit-animation:rotateImg 5s linear infinite;<!--修改旋转周期--> border: 1p ...
- Three.js制作360度全景图
这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"> ...
- 基于Three.js的360度全景--photo-sphere-viewer--简介
这个是基于three.js的全景插件 photo-sphere-viewer.js ---------------------------------------- 1.能添加热点: 2.能调用陀 ...
- JS+CSS3 360度全景图插件 - Watch3D.js
日常闲扯 从上一篇文章到这篇中间快过了一年了,时间真滴过得快.不是在下中间没想过写新的文章,而是自己确实变懒了(体重+1 +1 +1 +1....) ..OTL...不过到最后觉得还是需要写点东西,不 ...
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
- C# 图片旋转360度程序
这几天开发一个程序,需要将一个图片旋转360度然后每一个角度保存下来.刚开始本来想着是让美工弄的,但是让一个美工手动转360度,她会喷你一脸. using System; using System.C ...
- 原生Js封装的产品图片360度展示
挺简单的一段程序,但是效果不错: 1.把需要展示的36张图片先预加载到浏览器缓存里 2.给展示图片的div添加方法 3.通过鼠标左右移动的像素转换图片 在线效果预览:http://jsfiddle.n ...
随机推荐
- 控制textbook输入字符
在KeyPress事件中假如如下代码此实例表示可输入数字退格和“.”. 具体字符KeyChar见连接 http://www.cnblogs.com/linji/archive/2012/10/24/2 ...
- margin 塌陷现象 与 注意事项
1.在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象. 但是,脱标之后就不会出现margin的塌陷现象. 2.margin:0 auto; 会让盒子水平居 ...
- strace 分析 跟踪 进程错误
strace是什么? 按照strace官网的描述, strace是一个可用于诊断.调试和教学的Linux用户空间跟踪器.我们用它来监控用户空间进程和内核的交互,比如系统调用.信号传递.进程状态变更等. ...
- SQL truncate 、delete与drop区别
SQL truncate .delete与drop区别 相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句 ...
- shell之crontab
一 crontab高级用法 Crontab 主要是在做排程, 通常一般寫法大概都是如下: 0 0 * * * /usr/local/www/awstats/cgi-bin/awstats.sh 這種 ...
- ue4访问php接口
继上一篇介绍ue4打开web url窗口,这篇就来介绍下怎么访问php接口. 要做的两步: 1.c++自己写个接受请求的方法 f Post lhc-URL Request就是自定义的c++方法, /* ...
- 单片机联网,UIP实现tcp/udp协议
UIP是单片机界联网的一个很好地选择,移植这个库有点复杂,首先是第一步,网卡驱动要写好,使用的网卡芯片为ENC28J60,驱动可以再工程包里面找到 //配置网卡硬件,并设置MAC地址 //返回值:0, ...
- 【转】国外程序员收集整理的PHP资源大全
ziadoz在 Github发起维护的一个PHP资源列表,内容包括:库.框架.模板.安全.代码分析.日志.第三方库.配置工具.Web 工具.书籍.电子书.经典博文等等.伯乐在线对该资源列表进行了翻译, ...
- Android SQLite 加入自定义函数
SQLite Database 自定义函数实现: //Here's how to create a function that finds the first character of a strin ...
- 微信公众号支付开发全过程 --JAVA
按照惯例,开头总得写点感想 ------------------------------------------------------------------ 业务流程 这个微信官网说的还是很详细的 ...