码迷，mamicode.com
首页 > Web开发 > 详细

用js写的比较简单3D旋转效果

时间：2015-05-31 20:10:54      阅读：240      评论：0      收藏：0      [点我收藏+]

标签：

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旋转效果

标签：

原文地址：http://www.cnblogs.com/huangyy/p/4542473.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！