纯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正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
详解JavaScript函数
Dec 01 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
vuex的module模块用法示例
Nov 12 Javascript
实现高性能javascript的注意事项
May 27 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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
基于php编程规范(详解)
2017/08/17 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
JS 对象介绍
2010/01/20 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
js实现漫天星星效果
2017/01/19 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
python 调用win32pai 操作cmd的方法
2017/05/28 Python
【python】matplotlib动态显示详解
2019/04/11 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
什么是servlet
2012/05/08 面试题
乡镇信息公开实施方案
2014/03/23 职场文书
节约用水的口号
2014/06/20 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
给客户的检讨书
2014/12/21 职场文书
采购员岗位职责
2015/02/03 职场文书
审美与表现自我评价
2015/03/09 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
爱的教育观后感
2015/06/17 职场文书
开学随笔
2015/08/15 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技