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 ...
随机推荐
- PAT (Advanced Level) 1009. Product of Polynomials (25)
简单模拟. #include<iostream> #include<cstring> #include<cmath> #include<algorithm&g ...
- The 2014 ACMICPC Asia Regional Guangzhou Online
[A]-_-/// [B]线段树+位运算(感觉可出) [C]地图BFS,找最长线 [D]地图BFS,加上各种复杂情况的最短路-_- [E]-_-/// [F]三分+圆与线段的交点,计算几何 [G]-_ ...
- The 2014 ACMICPC Asia Regional Beijing Online
[A]极角排序+树状数组 [B]计算几何,凸包(队友已出) [C]-_-///不懂 [D]数论,概率密度 [E]图的连通性+Floyed传递闭包+bitset [F]贪心 [G]签到题 [H]区间维护 ...
- 牛掰啊，github+svn+FB进行项目开发
刚刚头脑发热,用svn把自己的github的一个项目下载下来,然后在Flash Builder中导入,然后惊喜的发现项目居然被svn接管了,如图: 当然,你得给你的Flash Builder装SVN插 ...
- POJ 3421 X-factor Chains
线型素数筛+质因素分解+组合数. AC后发现这样做效率有点低..766ms. #include<stdio.h> #include<string.h> #include< ...
- html 设置页脚div一直在页面底部
先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...
- ucos移植指南
指定堆栈数据类型(宽度) typedef unsigned int OS_STK; 指定Ucos移植方法3中保存cpu状态寄存器的变量的宽度 typedef unsigned int OS_CPU_S ...
- DWR3.0框架入门（1） —— 实现ajax
框架简介:DWR(Direct Web Remoting) 是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏 ...
- MySql5.6设置慢查询
---恢复内容开始--- 在my.cnf中 mysqld节点下 #开启慢查询 slow_query_log = ON #设置超时时间 slow_launch_time = 2 #记录日志 slow_q ...
- 安装arm-linux-gcc交叉编译器
1.开发平台 虚拟机:VMware 12 操作系统:Ubuntu 14.04 2.准备交叉编译工具包(arm-linux-gcc-4.5.1) 编译uboot和linux kernel都需要gnu交叉 ...