<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#show{position:relative;margin:20px auto;width:800px;border:1px solid #999999;}
.item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}
</style>
<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>
</head>
<body>
<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>
</body>
</html>

js立体旋转展示效果的更多相关文章

  1. iOS 使用 CATransform3D 处理 3D 影像、制做互动立体旋转的效果

    1. Swift http://www.cocoachina.com/swift/20170518/19305.html domehttps://pan.baidu.com/s/1i4XXSkH OC ...

  2. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  4. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  5. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  6. css3立体旋转动画

    demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...

  7. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  8. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  9. Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

随机推荐

  1. IndentationError: unexpected indent

    都知道python是对格式要求很严格的,写了一些python但是也没发现他严格在哪里,今天遇到了IndentationError: unexpected indent错误我才知道他是多么的严格.    ...

  2. Python 读取文件 with语句 管理上下文

    为了避免打开文件后忘记关闭,可以通过管理上下文 with open('file_name', 'r') as f: pass with 执行完毕之后 自动关闭且释放资源

  3. @EnableAsync annotation metadata was not injected

    [问题描述] @EnableAsync annotation metadata was not injected spring配置初始化时候报错 nested exception is java.la ...

  4. 用ildasm和ilasm对.net下的exe程序进行破解初探

    1.对ildasm和ilasm的解释和用法在msdn上有. ildasm:MSIL 反汇编程序是 MSIL 汇编程序 (Ilasm.exe) 的伙伴工具. Ildasm.exe 采用包含 Micros ...

  5. Juicer模板引擎使用笔记

    关于Juicer:Juicer 是一个高效.轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC). 除此之外,它还可以在 Node.js ...

  6. JSP动态产生的代码，点击显示确认操作，根据操作跳转并传值。

    假如有如下一段代码产生了多个选项我们改如何获得点击删除一项中的值? <%List<Theme> themelist=(List<Theme>)request.getAtt ...

  7. centOS7-配置网络地址

    1.首先需求切换都root账户 # su #输入密码: 2.进入网络配置文件目录查看 ()进入该目录 # /etc/sysconfig/network-scripts ()查看目录下文件 # ll - ...

  8. 【jQuery】(6)---jQuery validate插件

    jQuery  validate插件 一.导入js库                                      先导入jQuery库,然后导入Validate插件,如果是中文提示还需要 ...

  9. 用Vue开发一个实时性时间转换功能，看这篇文章就够了

    前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...

  10. HTTP 首部字段详细介绍

    本文是HTTP解析系列第二篇,如果对http协议不是很了解,可以选去看第一篇:带新手走进神秘的HTTP协议,本文主要是对Http的首部字段进行详细解析. HTTP 协议的请求和响应报文中必定包含 HT ...