纯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 相关文章推荐
javascript eval和JSON之间的联系
Dec 31 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
基于layui内置模块(element常用元素的操作)
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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
Python备份Mysql脚本
2008/08/11 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python中必要的名词解释
2019/11/20 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python发送邮件实现基础解析
2020/08/14 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
通信工程毕业生求职信
2013/11/16 职场文书
财务总监管理职责范文
2014/03/09 职场文书
英语邀请函范文
2015/02/02 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS