zoukankan      html  css  js  c++  java
  • 我的学习笔记004javascript实现旋转导航菜单

    使用的方法

    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;
                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>

  • 相关阅读:
    [华为机试] 计算二进制数中1的个数
    vector释放
    opencv findcontours内存错误
    opencv的编译安装
    opencv SVM分类器模块的简单设计
    centos7.6安装FFMpeg
    centos安装jenkins
    centos 7.6安装Java
    Centos7 忘记密码的情况下,修改root或其他用户密码
    性能测试报告
  • 原文地址:https://www.cnblogs.com/mxxblog/p/2356911.html
Copyright © 2011-2022 走看看