纯JS实现旋转图片3D展示效果


Posted in Javascript onApril 12, 2015

CSS:

<style type="text/css">
#show{position:relative;margin:20px auto;width:800px;}
.item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style>

Html:

input id="l" type="button" value="left" /> <input id="r" type="button" value="right" />
<div id="show">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">0</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

JS

<script>
var len;
var showerObj;
var listObj;
var showerWidth=800;
var showerHeight=400;
var r;
var cR=0;
var ccR=0;
var timer=0;
window.onload=function(){
 showerObj=document.getElementById("show");
 listObj=showerObj.getElementsByTagName("div");
 len=listObj.length;
 r=Math.PI/180*360/len;
 for(var i=0;i<len;i++){
 var item=listObj[i];
 item.style.top=showerHeight/2+Math.sin(r*i)*showerWidth/2-20+"px";
 item.style.left=showerWidth/2+Math.cos(r*i)*showerWidth/2-30+"px";
 item.rotate=(r*i+2*Math.PI)%(2*Math.PI);
 item.onclick=function(){
  cR=Math.PI/2-this.rotate;
  timer || (timer=setInterval(rotate,10));
  
 }
 
 }
 var rX=showerObj.offsetLeft+showerWidth/2;
 var ry=showerObj.offsetTop+showerHeight/2;
 
 var rotate=function(){
 ccR=(ccR+2*Math.PI)%(2*Math.PI);
 if(cR-ccR<0) cR=cR+2*Math.PI;
 if(cR-ccR<Math.PI){
  ccR=ccR+(cR-ccR)/19;
 }else{
  ccR=ccR-(2*Math.PI+ccR-cR)/19;
 
 }
 
 if(Math.abs((cR+2*Math.PI)%(2*Math.PI)-(ccR+2*Math.PI)%(2*Math.PI))<Math.PI/720){
  ccR=cR;
  clearInterval(timer);
  timer=0;
 }
 
 for(var i=0;i<len;i++){
  var item=listObj[i];
  var w,h;
  var sinR=Math.sin(r*i+ccR);
  var cosR=Math.cos(r*i+ccR);
  w=60+0.6*60*sinR;
  h=(40+0.6*40*sinR);
  item.style.cssText +=";width:"+w+"px;height:"+h+"px;top:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+"px;left:"+parseInt(showerWidth/2+cosR*showerWidth/2-h/2)+"px;z-index:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+";";
 
 }
 }
 
 document.getElementById("l").onclick=function(){
 cR=(cR+r+2*Math.PI)%(2*Math.PI);
 timer || (timer=setInterval(rotate,10));
 }
 document.getElementById("r").onclick=function(){
 cR=(cR-r+2*Math.PI)%(2*Math.PI);
 timer || (timer=setInterval(rotate,10));
 }
 rotate();
}
</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js变量以及其作用域详解
Jul 18 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
jquery foreach使用示例
Sep 12 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 #Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 #Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 #Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 #Javascript
JavaScript 面向对象与原型
Apr 10 #Javascript
javascript基本包装类型介绍
Apr 10 #Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 #Javascript
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
php生成zip文件类实例
2015/04/07 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
sina的lightbox效果。
2007/01/09 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
javascript常用的设计模式
2017/02/09 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python简单进程锁代码实例
2015/04/27 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
利用python计算时间差(返回天数)
2019/09/07 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
幼儿园教师节活动方案
2014/02/02 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
英语教研活动总结
2014/07/02 职场文书
家长通知书家长意见
2014/12/30 职场文书
收银员岗位职责
2015/02/03 职场文书
2015年学生资助工作总结
2015/05/25 职场文书