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 ...
随机推荐
- Lua学习系列（二）
资源整理: 风云老师博客: http://blog.codingnow.com/eo/luaoeeeaeau/ 知乎: https://www.zhihu.com/question/20736660 ...
- Ibatis自动生成dao sqlmapper文件和domain文件过程
generator自动生成mybatis的xml配置.model.map等信息: 1.下载mybatis-generator-core-1.3.2.jar包. 网址:http://cod ...
- xcode 6 出现的新问题
1.prefix.pch文件的使用 [1].需要自己创建 点击new file-->选择IOS中的Other选项卡,选择PCH File [2].创建完后需要设置一下才能成功 Prefix He ...
- Laravel Eloquent get获取空的数据问题
在用laravel框架来获取数据,若数据不存在时,以为会返回空,其实不是的,其实是一个 collection 值,会返回如下: object(Illuminate\Database\Eloquent\ ...
- shell 实例学习
安装crond:yum install crontabs (http://blog.163.com/victory_wxl/blog/static/14130530220115296180333/) ...
- tp框架中的静态验证
//制定命名空间在Home 模块下Model文件夹下 如:namespace Home\Model; //引用父类 如:use Think\Model; //实例化表 如:class ZhuCeMod ...
- [转载] python利用psutil遍历进程名字和exe所在目录
本文转载自: http://www.duanzhihe.com/1594.html http://www.jianshu.com/p/64e265f663f6 import psutil,os,tim ...
- Unity3D ——强大的跨平台3D游戏开发工具（五）
第九章 图形用户界面类G.U.I 您在玩很多3D游戏的时候,不知是否注意到在游戏界面中,总有一些图形和文字信息是不随着3D视角的改变而改变的.这也是由于游戏本身的要求而决定的.比如说英雄的生命值,聊天 ...
- web前端面试第三波~
快来测试测试自己掌握能力吧! 1. class.forname的作用?为什么要用? 1).获取Class对象的方式:类名.class.对象.getClass().Class.forName(" ...
- [原]崩溃在ole32!CStdMarshal::DisconnectSrvIPIDs
最近项目里遇到一个崩溃,不定期出现,很是头疼!今晚终于忍无可忍,下决心要干掉它!(于是用凉水洗了把脸,开始分析dump)希望凌晨的这篇总结对有相似经历的朋友有所启发!(看之前相关的几个dump可以猜到 ...