我的学习笔记004--javascript实现旋转导航菜单

最新推荐文章于 2021-12-30 23:59:53 发布

weixin_30843605

最新推荐文章于 2021-12-30 23:59:53 发布

阅读量86

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/mxxblog/archive/2012/02/16/2356911.html

版权

使用的方法

1，js dom css

2，Math函数

示例代码

<!<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>旋转导航菜单</title>
    <style type="text/css">
        .circle
        {
            position: absolute;
            z-index: 2;
            visibility: hidden;
            width: 349px;
            height: 262px;
        }
        img
        {
            border-style: none;
        }
    </style>
</head>
<body>
    <div id="circle1" class="circle">
        <a href="#">
            <img src="Images/01.JPG" alt="" /></a></div>
    <div id="circle2" class="circle">
        <a href="#">
            <img src="Images/02.JPG" alt="" /></a></div>
    <div id="circle3" class="circle">
        <a href="#">
            <img src="Images/03.JPG" alt="" /></a></div>
    <div id="circle4" class="circle">
        <a href="#">
            <img src="Images/04.JPG" alt="" /></a></div>
    <div id="circle5" class="circle">
        <a href="#">
            <img src="Images/05.JPG" alt="" /></a></div>
    <div id="circle6" class="circle">
        <a href="#">
            <img src="Images/06.JPG" alt="" /></a></div>
    <script type="text/javascript" language="javascript">
        var divall;
        var r = 300; 旋转半径
        var circleX = 500; //旋转中心点坐标
        var circleY = 300;
        var pos;
        var pai = window.Math.PI;
        var pianyi = pai / 150; //偏转角
        function start() {
            divall = new Array(document.all.circle1.style, document.all.circle2.style, document.all.circle3.style, document.all.circle4.style, document.all.circle5.style, document.all.circle6.style);
            pos = new Array();
            pos[0] = 0;
            for (var i = 1; i < divall.length; i++) {
                pos[i] = parseFloat(pos[i - 1] + (2 * pai / divall.length));
            }
            circle();
        }
        function circle() {
            for (var i = 0; i < pos.length; i++) {
                pos[i] = pos[i] + pianyi;
                divall[i].visibility = "visible"
                divall[i].left = r * Math.cos(pos[i]) + circleX;
                divall[i].top = r * Math.sin(pos[i]) + circleY;

            }
            window.setTimeout("circle()", 100);
        }
        start();
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/mxxblog/archive/2012/02/16/2356911.html

weixin_30843605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的学习笔记004--javascript实现旋转导航菜单

使用的方法1，js dom css2，Math函数示例代码<!<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.o...
复制链接

扫一扫