用js写的比较简单3D旋转效果
HTML代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#radio{ position: relative; margin:0 auto; width: 1280px; height: 800px;border: 1px solid red;}
.radio_style{border: 5px solid rgb(14,73,102); transition:all 1s; width: 200px; height: 200px;}
.radio_style>div{opacity: 0.3; border-radius: 50%;background: black;margin:0 auto;margin-top: 150px;transition:all 1s;}
#radio1{
transition:all 1s;
background: #CCCCCC;
position: absolute;
left:150px;
top: 40%;
width: 200px;
height: 150px;
z-index: 1}
#radio2{
transition:all 1s;
background: #CCCCCC;
position: absolute;
left:250px;
top: 36%;
width: 250px;
height: 200px;
z-index: 2
}
#radio3{
transition:all 1s;
background: #CCCCCC;
position: absolute;
left:400px;
top: 25%;
width: 500px;
height: 350px;
z-index: 3
}
#radio4{
transition:all 1s;
background: #CCCCCC;
position: absolute;
left:800px;
top: 36%;
width: 250px;
height: 200px;
z-index: 2
}
#radio5{
transition:all 1s;
background: #CCCCCC;
position: absolute;
left:950px;
top:40%;
width: 200px;
height: 150px;
z-index: 1
}
#radio1>div{width: 200px ;margin-top: 200px;height:5px }
#radio2>div{width: 250px;margin-top: 300px;height: 10px; }
#radio3>div{width: 500px;margin-top: 450px;height: 20px }
#radio4>div{width: 250px;margin-top: 300px;height: 10px }
#radio5>div{width: 200px;margin-top: 200px; height: 5px} </style>
</head>
<body>
<div id="radio">
<div class="radio_style" id="radio1" onclick="fun1();"><div></div></div>
<div class="radio_style" id="radio2" onclick="fun2()"><div></div></div>
<div class="radio_style" id="radio3" onclick="fun3()"><div></div></div>
<div class="radio_style" id="radio4" onclick="fun4()"><div></div></div>
<div class="radio_style" id="radio5" onclick="fun5()"><div></div></div>
</div>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
js代码:
/**
* Created by Administrator on 15-4-27.
*/
function $(id){
return document.getElementById(id);
}
function fun1(){
$("radio1").style.left="400px";
$("radio1").style.top="25%";
$("radio1").style.width="500px";
$("radio1").style.height="350px";
$("radio1").style.zIndex="3";
$("radio1").firstElementChild.style.marginTop="450px";
$("radio1").firstElementChild.style.width="500px";
$("radio1").firstElementChild.style.height="20px";
$("radio2").style.left="800px";
$("radio2").style.top="36%";
$("radio2").style.width="250px";
$("radio2").style.height="200px";
$("radio2").style.zIndex="2";
$("radio2").firstElementChild.style.marginTop="300px";
$("radio2").firstElementChild.style.width="250px";
$("radio2").firstElementChild.style.height="10px";
$("radio3").style.left="950px";
$("radio3").style.top="40%";
$("radio3").style.width="200px";
$("radio3").style.height="150px";
$("radio3").style.zIndex="1";
$("radio3").firstElementChild.style.marginTop="200px";
$("radio3").firstElementChild.style.width="200px";
$("radio3").firstElementChild.style.height="5px";
$("radio5").style.left="250px";
$("radio5").style.top="36%";
$("radio5").style.width="250px";
$("radio5").style.height="200px";
$("radio5").style.zIndex="2";
$("radio5").firstElementChild.style.marginTop="300px";
$("radio5").firstElementChild.style.width="250px";
$("radio5").firstElementChild.style.height="10px";
$("radio4").style.left="150px";
$("radio4").style.top="40%";
$("radio4").style.width="200px";
$("radio4").style.height="150px";
$("radio4").style.zIndex="1";
$("radio4").firstElementChild.style.marginTop="200px";
$("radio4").firstElementChild.style.width="200px";
$("radio4").firstElementChild.style.height="5px"; }
function fun2(){
$("radio2").style.left="400px";
$("radio2").style.top="25%";
$("radio2").style.width="500px";
$("radio2").style.height="350px";
$("radio2").style.zIndex="3";
$("radio2").firstElementChild.style.marginTop="450px";
$("radio2").firstElementChild.style.width="500px";
$("radio2").firstElementChild.style.height="20px";
$("radio3").style.left="800px";
$("radio3").style.top="36%";
$("radio3").style.width="250px";
$("radio3").style.height="200px";
$("radio3").style.zIndex="2";
$("radio3").firstElementChild.style.marginTop="300px";
$("radio3").firstElementChild.style.width="250px";
$("radio3").firstElementChild.style.height="10px";
$("radio4").style.left="950px";
$("radio4").style.top="40%";
$("radio4").style.width="200px";
$("radio4").style.height="150px";
$("radio4").style.zIndex="1";
$("radio4").firstElementChild.style.marginTop="200px";
$("radio4").firstElementChild.style.width="200px";
$("radio4").firstElementChild.style.height="5px";
$("radio1").style.left="250px";
$("radio1").style.top="36%";
$("radio1").style.width="250px";
$("radio1").style.height="200px";
$("radio1").style.zIndex="2";
$("radio1").firstElementChild.style.marginTop="300px";
$("radio1").firstElementChild.style.width="250px";
$("radio1").firstElementChild.style.height="10px";
$("radio5").style.left="150px";
$("radio5").style.top="40%";
$("radio5").style.width="200px";
$("radio5").style.height="150px";
$("radio5").style.zIndex="1";
$("radio5").firstElementChild.style.marginTop="200px";
$("radio5").firstElementChild.style.width="200px";
$("radio5").firstElementChild.style.height="5px";
}
function fun3() {
$("radio3").style.left="400px";
$("radio3").style.top="25%";
$("radio3").style.width="500px";
$("radio3").style.height="350px";
$("radio3").style.zIndex="3";
$("radio3").firstElementChild.style.marginTop="450px";
$("radio3").firstElementChild.style.width="500px";
$("radio3").firstElementChild.style.height="20px";
$("radio4").style.left="800px";
$("radio4").style.top="36%";
$("radio4").style.width="250px";
$("radio4").style.height="200px";
$("radio4").style.zIndex="2";
$("radio4").firstElementChild.style.marginTop="300px";
$("radio4").firstElementChild.style.width="250px";
$("radio4").firstElementChild.style.height="10px";
$("radio5").style.left="950px";
$("radio5").style.top="40%";
$("radio5").style.width="200px";
$("radio5").style.height="150px";
$("radio5").style.zIndex="1";
$("radio5").firstElementChild.style.marginTop="200px";
$("radio5").firstElementChild.style.width="200px";
$("radio5").firstElementChild.style.height="5px";
$("radio2").style.left="250px";
$("radio2").style.top="36%";
$("radio2").style.width="250px";
$("radio2").style.height="200px";
$("radio2").style.zIndex="2";
$("radio2").firstElementChild.style.marginTop="300px";
$("radio2").firstElementChild.style.width="250px";
$("radio2").firstElementChild.style.height="10px";
$("radio1").style.left="150px";
$("radio1").style.top="40%";
$("radio1").style.width="200px";
$("radio1").style.height="150px";
$("radio1").style.zIndex="1";
$("radio1").firstElementChild.style.marginTop="200px";
$("radio1").firstElementChild.style.width="200px";
$("radio1").firstElementChild.style.height="5px";
}
function fun4() {
$("radio4").style.left="400px";
$("radio4").style.top="25%";
$("radio4").style.width="500px";
$("radio4").style.height="350px";
$("radio4").style.zIndex="3";
$("radio4").firstElementChild.style.marginTop="450px";
$("radio4").firstElementChild.style.width="500px";
$("radio4").firstElementChild.style.height="20px";
$("radio5").style.left="800px";
$("radio5").style.top="36%";
$("radio5").style.width="250px";
$("radio5").style.height="200px";
$("radio5").style.zIndex="2";
$("radio5").firstElementChild.style.marginTop="300px";
$("radio5").firstElementChild.style.width="250px";
$("radio5").firstElementChild.style.height="10px";
$("radio1").style.left="950px";
$("radio1").style.top="40%";
$("radio1").style.width="200px";
$("radio1").style.height="150px";
$("radio1").style.zIndex="1";
$("radio1").firstElementChild.style.marginTop="200px";
$("radio1").firstElementChild.style.width="200px";
$("radio1").firstElementChild.style.height="5px";
$("radio3").style.left="250px";
$("radio3").style.top="36%";
$("radio3").style.width="250px";
$("radio3").style.height="200px";
$("radio3").style.zIndex="2";
$("radio3").firstElementChild.style.marginTop="300px";
$("radio3").firstElementChild.style.width="250px";
$("radio3").firstElementChild.style.height="10px";
$("radio2").style.left="150px";
$("radio2").style.top="40%";
$("radio2").style.width="200px";
$("radio2").style.height="150px";
$("radio2").style.zIndex="1";
$("radio2").firstElementChild.style.marginTop="200px";
$("radio2").firstElementChild.style.width="200px";
$("radio2").firstElementChild.style.height="5px";
}
function fun5() {
$("radio5").style.left="400px";
$("radio5").style.top="25%";
$("radio5").style.width="500px";
$("radio5").style.height="350px";
$("radio5").style.zIndex="3";
$("radio5").firstElementChild.style.marginTop="450px";
$("radio5").firstElementChild.style.width="500px";
$("radio5").firstElementChild.style.height="20px";
$("radio1").style.left="800px";
$("radio1").style.top="36%";
$("radio1").style.width="250px";
$("radio1").style.height="200px";
$("radio1").style.zIndex="2";
$("radio1").firstElementChild.style.marginTop="300px";
$("radio1").firstElementChild.style.width="250px";
$("radio1").firstElementChild.style.height="10px";
$("radio2").style.left="950px";
$("radio2").style.top="40%";
$("radio2").style.width="200px";
$("radio2").style.height="150px";
$("radio2").style.zIndex="1";
$("radio2").firstElementChild.style.marginTop="200px";
$("radio2").firstElementChild.style.width="200px";
$("radio2").firstElementChild.style.height="5px";
$("radio4").style.left="250px";
$("radio4").style.top="36%";
$("radio4").style.width="250px";
$("radio4").style.height="200px";
$("radio4").style.zIndex="2";
$("radio4").firstElementChild.style.marginTop="300px";
$("radio4").firstElementChild.style.width="250px";
$("radio4").firstElementChild.style.height="10px";
$("radio3").style.left="150px";
$("radio3").style.top="40%";
$("radio3").style.width="200px";
$("radio3").style.height="150px";
$("radio3").style.zIndex="1";
$("radio3").firstElementChild.style.marginTop="200px";
$("radio3").firstElementChild.style.width="200px";
$("radio3").firstElementChild.style.height="5px";
}
大家可以试试我这个旋转效果,全是用定位来做的,问题还有很多,js功底不行,如果旋转的个数增加的话,相应的代码就会增加不少。
这里有6个矩形旋转,点最后一层的时候有问题,所以在每个函数开头做了限制。
希望看到的朋友帮我解决下这个问题,面向对象的功底还很差
用js写的比较简单3D旋转效果的更多相关文章
- js写的一个简单的手风琴菜单
1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&q ...
- 原生js写的一个简单slider
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用JS写的一个简单的时钟
没什么技术含量,单纯的想传上去.手痒了 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- Css3动画(一) 如何画3D旋转效果或者卫星围绕旋转效果
如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说 ...
- Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
- 好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果
原文:好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https:// ...
- webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课(定位升级版)
序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的 ...
随机推荐
- HTTPS (HTTP Secure)
what is HTTPS HTTPS = HTTP + TSL Hypertext Transfer Protocol Secure (HTTPS) is acommunications proto ...
- mongodb的linux环境搭建
一.启动 [mongodb@node1 ~]$ mongod -f /data/config/shard1.confmongod: /usr/lib64/libcrypto.so.10: no ver ...
- SQL SERVER 分页查询
Sqlserver数据库分页查询一直是Sqlserver的短板. 但现在不是了. 自从有了它. 一口气上十楼. 官方语法说明示例: https://technet.microsoft.com/zh-c ...
- SQL注入的原理以及危害
SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如先前的很多影视网站泄露VIP会员密码大多就是通过WEB表单递交查询字符 ...
- Oracle 11G在用EXP 导出时,空表不能导出解决
Oracle 11G在用EXP 导出时,空表不能导出解决 (转)(.http://wanwentao.blog.51cto.com/2406488/545154 11G中有个新特性,当表无数据时,不分 ...
- Codeforces 703B (模拟) Mishka and trip
题目:这里 题意:n个城市,每个城市有个魅力值vi,首先,有n条路将这n个城市连成一个环,1号城市连2号城市,2号连3号****n号连1号城市,每条路的魅力值是其连接的两个城市 的魅力值的乘积,这n个 ...
- 修复IE9.0下PlaceHolder 属性问题js脚本
在开发前端系统时候碰到这种兼容问题,以下是个人解决方案,希望能给其他人带来帮助: var JPlaceHolder = { //检测 _check: function () { return 'pla ...
- 关于安装sql2012出现的netfx3功能问题
这个问题需要下载framework3.5即可继续正常安装,所以说低版本的framework也是有必要安装的
- 操作系统win2003 x64的,安装OFFICE2003后,DCOM服务找不到 WORD应用程序服务
打开注册表,找到以下健值 HKEY_CLASSES_ROOT\AppID\{00020906-0000-0000-C000-000000000046} HKEY_CLASSES_ROOT\CLSID\ ...
- 使用winpcap多线程抓包,以及简单的分析数据包
刚开始使用winpcap数据包的时候,我在抓包的时候使用了 pcap_loop(adhandle, 0, packet_handler, NULL); 这个回调函数进行抓包.同时在回调函数中分析IP地 ...