考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:设计制作 > JavaScript > 文章内容
  

用Javascript制作旋转导航菜单

 [ 2017年9月5日 ] 【

你见过这样的导航菜单吗?导航菜单围绕着网站Logo不停地旋转,而一旦你把鼠标移到菜单上,旋转立即停止,在显示网站logo的地方显示出这个菜单链接的内容简介,点击链接将链接到指定的网页。一旦你的鼠标离开菜单,导航菜单又继续不停地旋转。你看这种导航菜单是不是既吸引人又贴近用户。本文例子如下图所示。是不是想在自已的网页上也放上一个,其实制作起来也不太难。

#FormatImgID_0#

制作思路:要使页面的内容旋转起来,用图层和Javascript程序是肯定的了,要使图层的运动轨迹是一个圆,这要用到圆的参数方程,这是一个数学问题,不懂也没关系,程序我已写好,你只要复制就行了。关于鼠标指到某个链接就显示该链接的内容简介,这是图层的visible属性控制,用Dreamweaver的网友,用Behaviors很容易实现,不过在本文中我自编了一个小程序来控制图层的visible属性,以便不用Dreamweaver的网友也能很容易地做出本文的效果。

制作方法:

1、把下面这段程序插入到网页源代码的与之间:


引用本程序时,注意以下几点:

1)可通过修改旋转半径来调整旋转范围的大小;

2)修改旋转中心的X、Y坐标,可以把旋转效果移到页面的任何地方。

本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved