纯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实现给图片加链接
Aug 15 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 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内存缓存Memcached类实例
2014/12/08 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
js实现倒计时秒杀效果
2020/03/25 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
考试退步检讨书
2014/01/15 职场文书
护士长竞聘书
2014/03/31 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书