ITPub博客

首页 > 应用开发 > Java > 用Javascript制作旋转导航菜单(转)

用Javascript制作旋转导航菜单(转)

原创 Java 作者:amyz 时间:2007-08-12 15:46:34 0 删除 编辑
用Javascript制作旋转导航菜单(转)[@more@]

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

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

  制作方法:

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

  

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

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

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

  2、在网页源代码的与之间插入下面的代码以制作导航菜单等图层:

  

链接1内容简介

链接2内容简介

链接3内容简介

链接4内容简介

  上面的代码看起来有点复杂,你若对HTML不熟悉的话,可以不要管它,只要把其中的文本、图片和超级链接换成你所需要的就行了。

  至此,制作结束,一个美观实用的旋转导航菜单就做好了。在实际制作过程中,由菜单内容简介的图层是设置成隐藏的,若是用DW或FP的网友可能无法编辑,解决的办法是:

  1)在源代码中编辑;

  2)把CSS样式表中的这段代码visibility:hidden;删除,这样那些图层就可看见了,但是,是重叠在一起的,可用鼠标把它们拖开,把内容写好后,再把它们拖回原处。使用DW的网友可用DW的图层面板操作就方便多了。

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/10752019/viewspace-950443/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
  • 博文量
    3982
  • 访问量
    7894371