纯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 21 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
初识Node.js
Sep 03 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
如何使用php实现评委评分器
2015/07/31 PHP
php-app开发接口加密详解
2018/04/18 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
javascript 写类方式之十
2009/07/05 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
javascript几个易错点记录
2014/11/26 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
React中的refs的使用教程
2018/02/13 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
express框架下使用session的方法
2019/07/31 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python正则-re的用法详解
2019/07/28 Python
用Python写一个自动木马程序
2019/09/17 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
暑假实习求职信范文
2013/09/22 职场文书
写好自荐信的技巧
2013/11/08 职场文书
倡议书格式
2014/04/14 职场文书
会计求职信范文
2014/05/24 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
复兴之路展览观后感
2015/06/02 职场文书
党支部意见范文
2015/06/02 职场文书
python入门之算法学习
2021/04/22 Python