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

使用的方法

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>

我的学习笔记004--javascript实现旋转导航菜单mxx相关推荐

GEE(Google Earth Engine) 最基础代码学习笔记二 —— JavaScript 语言
GEE(Google Earth Engine) 学习笔记二 Javascript 语言 1. 注释 print('Hello World!'); 如果要注释,则在代码前面加//,比如: // pri ...
【学习笔记】ROS-移动机器人导航相关
[学习笔记]ROS-移动机器人导航相关一.定位二.导航 1. move_base现存问题三.可视化 1. Rviz显示机器人运动轨迹方法: 一.定位二.导航 1. move_base现存问题 ...
陈表达VBA学习笔记-新建工作表鼠标右键菜单按钮
陈表达VBA学习笔记-新建工作表鼠标右键菜单按钮:新建一个我的菜单按钮设置对应的宏过程名称为 [我的菜单宏] 点击按钮弹窗信息,信息可自定义设置详细代码如下: Sub 新建右键菜单()Dim 菜单 ...
JavaFX+Jfoenix 学习笔记（五）--ContextMenu右键菜单
1.右键菜单,如图 2.实例-1:最简单的右键菜单下面我们演示一个通过右键菜单来改变背景和字体颜色的例子. package zkh.javafx.learn.contextmenu;import j ...
html旋转的环形菜单,前端开发圆形旋转导航菜单教程
/p> 前端开发商城页面:圆形旋转导航菜单 html, body { padding: 0; margin: 0; } 圆形菜单[最多容纳8个最大正方形菜单块, 若需容纳更多的菜单块,则需要缩小 ...
前端学习笔记之 JavaScript WebAPIs（整理）
目录篇一一.鼠标事件二.获取元素的属性值三.设置元素的属性值四.移除属性五.H5自定义属性 1. 设置自定义属性 2. 获取自定义属性六.节点操作 1.两种方法的区别 2.节点概述 3 ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
JS学习笔记二——JavaScript 基础知识
JavaScript 基础知识一.JavaScript 变量二.JavaScript 的输出三.JavaScript 运算符四.结语一.JavaScript 变量变量是指在程序运行过程中, ...
学习笔记5--车用地图与导航技术(下)
本系列博客包括6个专栏,分别为:<自动驾驶技术概览>.<自动驾驶汽车平台技术基础>.<自动驾驶汽车定位技术>.<自动驾驶汽车环境感知>.<自动驾驶 ...

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

我的学习笔记004--javascript实现旋转导航菜单mxx相关推荐

最新文章

热门文章