纯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 相关文章推荐
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
几种tab切换详解
Feb 03 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
npm ci命令的基本使用方法
Sep 20 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调用时间格式的参数详解
2013/06/06 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
Python中利用xpath解析HTML的方法
2018/05/14 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python实现分数序列求和
2020/02/25 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
python的pip有什么用
2020/06/17 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
公司庆典活动邀请函
2014/01/09 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
师德师风承诺书
2014/05/23 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书