纯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判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 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使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
php中static和const关键字用法分析
2016/12/07 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python实现维吉尼亚算法
2019/03/20 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
项目副经理岗位职责
2013/12/30 职场文书
销售行政专员职责
2014/01/03 职场文书
环境科学专业求职信
2014/08/04 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
React列表栏及购物车组件使用详解
2021/06/28 Javascript