一个很Cool的JS菜单效果

代码封装完成啦
在这里谢谢大家对我的支持!
偶参照一些Flash站点的菜单,
用javascript仿了一个,效果还是挺Cool的.

简单地写一个使用说明:
第一步:实体化X-Menu类
   用法:
   var <实体变量>.new CoolMenuControl()

第二步:建立菜单项目---

用法:
    <实体变量>.insertmenu(类型,Html代码,链接网址,目标)
     类型:0代表菜单标题,1代表树型菜单子项目,2代表横向菜单子项目
     Html代码:显示在菜单上的Html代码
      链接网址:不用多说了,网址或Javascript脚本
      目标:默认为空,既不在本页打开;"_blank"代表在新的页面打开
 例如:     
    CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 新浪网","http://www.sina.com.cn/","_blank")   

第三步:建立菜单---

用法:
    <实体变量>.init(实体变量名,边框颜色,背景颜色,滑动速度,背景半透明度)
       '实体变量名'必须与<实体变量>相同
       如果背景颜色="transparent"既为完全透明
 例如:     
    CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)

function CoolMenuControl(){

//-----常规变量---
this.lastScrollX=0;
this.lastScrollY=0;
this.lastScrollW=0;
this.lastScrollH=0;
this.td_X=0;
this.td_Y=0;
this.td_W=0;
this.td_H=0;
this.td=0;
this.mouseon=0;
this.current=null
this.hk_name;
this.hktable_name;
this.menudiv_name;
this.menutable_name;
this.ml=0;
this.menuarray=new Array();
this.speed;
this.href="";

//-----菜单项目---
function menuitem(type,value,url,target){
this.type=type
this.value=value
this.url=url
this.target=target
}

//-----插入菜单---
this.insertmenu=function(type,value,url,target){
this.menuarray[this.menuarray.length]=new menuitem(type,value,url,target)
}

//-----程序初试化---
this.init=function(name,bdc,bgc,speed,Alpha){
var inhtml=""
var cellcount=0
var lastcellcount=0
this.hk_name=name+"hk"
this.hktable_name=name+"hktable"
this.menudiv_name=name+"menudiv"
this.menutable_name=name+"menutable"
this.speed=speed

for (i=0;i"
+"

"
+"

";
document.write(suspendcode);
var fcell=true
for (i=0;i

'+this.menuarray[i].value
}
else
{
inhtml+='

'+this.menuarray[i].value
}
fcell=true
break;
case "1":
t=(cellcount-1)*2
if (t

'+this.menuarray[i].value
}
else
{
inhtml+='

'+this.menuarray[i].value
}
fcell=true
break;

case "2":
if (fcell)
{
inhtml+='

'+this.menuarray[i].value;
fcell=false
}
else
{
inhtml+='

'+this.menuarray[i].value;
}
break;
}
}
inhtml='

'
+'

'
+inhtml
+'

';
//alert(inhtml)
document.write(inhtml);

this.lastScrollX=0;
this.lastScrollY=-4;
this.posXY(eval(this.menutable_name).cells[0])
this.td_W=eval(this.menutable_name).cells[0].scrollWidth+6
this.td_H=eval(this.menutable_name).cells[0].scrollHeight
setInterval(name+".scrollback()",1)
}

//-----单击超连接---
this.doClick=function(){
//alert(this.url)
var url=this.href.split(",")
//alert(url[0])
//alert(url[1])
if (url[0]=="") return

if (url[1]=="_blank")
{window.open(url[0])}
else
{location.href=url[0]}
}

//-----滑动处理---
this.scrollback=function(){
diffX=this.td_X-3
diffY=this.td_Y-5
diffW=this.td_W
diffH=this.td_H
percentX=this.speed*(diffX-this.lastScrollX);
percentY=this.speed*(diffY-this.lastScrollY);
percentW=this.speed*(diffW-this.lastScrollW);
percentH=this.speed*(diffH-this.lastScrollH);

if(percentX>0)percentX=Math.ceil(percentX);
else percentX=Math.floor(percentX);
if(percentY>0)percentY=Math.ceil(percentY);
else percentY=Math.floor(percentY);
if(percentW>0)percentW=Math.ceil(percentW);
else percentW=Math.floor(percentW);
if(percentH>0)percentH=Math.ceil(percentH);
else percentH=Math.floor(percentH);

eval(this.hk_name).style.pixelTop+=percentY;
eval(this.hk_name).style.pixelLeft+=percentX;
eval(this.hktable_name).style.pixelWidth+=percentW;
eval(this.hktable_name).style.pixelHeight+=percentH;

this.lastScrollX=this.lastScrollX+percentX;
this.lastScrollY=this.lastScrollY+percentY;
this.lastScrollW=this.lastScrollW+percentW;
this.lastScrollH=this.lastScrollH+percentH;
}

//-----滑出---
this.doOver=function() {
if (event.srcElement.tagName=="TD") {
if (event.srcElement.innerText.length==0 || event.srcElement.innerText=="|") return
this.posXY(event.srcElement)
this.td_W=event.srcElement.scrollWidth+6
this.td_H=event.srcElement.scrollHeight
}
}

//-----绝对定位---
this.posXY=function(obj){
hk_left=obj.offsetLeft
hk_top=obj.offsetTop
vParent = obj.offsetParent;

while (vParent.tagName.toUpperCase() != "BODY")
{
hk_left += vParent.offsetLeft;
hk_top += vParent.offsetTop;
vParent = vParent.offsetParent;
}

this.td_X=hk_left
this.td_Y=hk_top
}

//-----关于---
this.about=function(){
alert("OK")
}

}

.b{color=#000066;cursor:hand}
.menu {
font-family:Arial;
cursor:Default;
font-size:12px;
border:1px #000000 solid;
border-collapse: collapse;
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#dddddd)
progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3);
}
.ht{
font-weight:bold
}

.new CoolMenuControl()
--->

var CoolMenu1=new CoolMenuControl()
var CoolMenu2=new CoolMenuControl()
var CoolMenu3=new CoolMenuControl()

var about=new Array()
about[0]="关于X-Menu菜单\n\nAuthor:PuterJam\nCopyright 2004\n转载请通知本人"
about[1]="关于作者\n\n\"这家伙很懒,什么也没留下!!\"\n不过欢迎大家和我交流Javascript\nQQ:10644570\nE-Mail:PuterJam@etang.com"

.insertmenu(类型,Html代码,链接网址,目标)
 类型:0代表菜单标题,1代表树型菜单子项目,2代表横向菜单子项目
 Html代码:显示在菜单上的Html代码
链接网址:不用多说了,网址或Javascript脚本
目标:默认为空,既不在本页打开;"_blank"代表在新的页面打开
 例如:
CoolMenu2.insertmenu("2"," 新浪网","http://www.sina.com.cn/","_blank")  
-->

CoolMenu1.insertmenu("0","欢迎使用X-Menu (菜单演示)
  Made By PuterJam","","")
CoolMenu1.insertmenu("0"," ","http://www.blueidea.com/","_blank")

CoolMenu2.insertmenu("0"," 横向菜单","","")
CoolMenu2.insertmenu("2"," 新浪网","http://www.sina.com.cn/","_blank")
CoolMenu2.insertmenu("2"," 我的雅虎","http://cn.yahoo.com/","_blank")
CoolMenu2.insertmenu("2"," 亿唐","http://www.etang.com/","_blank")
CoolMenu2.insertmenu("2"," 21世纪","http://www.21cn.com/","_blank")
CoolMenu2.insertmenu("2"," 游侠网","http://www.ali213.net/","_blank")

CoolMenu3.insertmenu("0"," 树形菜单","","")
CoolMenu3.insertmenu("0"," ","http://www.blueidea.com/","_blank")
CoolMenu3.insertmenu("1","关于X-Menu菜单","javascript:alert(about[0])","")
CoolMenu3.insertmenu("1","关于作者","javascript:alert(about[1])","")
CoolMenu3.insertmenu("1","联系我","mailto:PuterJam@etang.com","")
CoolMenu3.insertmenu("1","你的浏览器版本","javascript:alert(navigator.appName)","")

.init(实体变量名,边框颜色,背景颜色,滑动速度,背景半透明度)
'实体变量名'必须与相同
如果背景颜色="transparent"既为完全透明
 例如:
CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)  
-->
CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)
CoolMenu2.init("CoolMenu2","#002000","#00FF80",0.2,10)
CoolMenu3.init("CoolMenu3","#002000","#f0FF00",0.3,25)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 一个很Cool的JS菜单效果

    代码封装完成啦 在这里谢谢大家对我的支持! 偶参照一些Flash站点的菜单, 用javascript仿了一个,效果还是挺Cool的. 简单地写一个使用说明: 第一步:实体化X-Menu类    用法:    var <实体变量>.new CoolMenuControl() 第二步:建立菜单项目--- 用法:     <实体变量>.insertmenu(类型,Html代码,链接网址,目标)      类型:0代表菜单标题,1代表树型菜单子项目,2代表横向菜单子项目      Html

  • JS实现光滑展开合拢的菜单效果代码

    本文实例讲述了JS实现光滑展开合拢的菜单效果代码.分享给大家供大家参考.具体如下: 这是一个光滑展开又合拢的JS菜单效果,无jQuery插件,完全JavaScript代码实现,没有过多修饰,有兴趣的美化一下,肯定是款不错的折叠菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-swift-fade-in-out-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • js实现全国省份城市级联下拉菜单效果代码

    本文实例讲述了js实现全国省份城市级联下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax了,貌似这种老形式已经过时了,不过在兼容性方面,仍然是不落后的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-conv-city-xl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI

  • js+css实现超简洁的二级下拉菜单效果代码

    本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

  • Js实现京东无延迟菜单效果实例(demo)

    这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 先来理清思路: 1.开发基本的菜单结构 2.开发普通的二级菜单效果 3.假如延迟解决移动问题,切换子菜单时候,用setTimeout设置延迟 debounce去抖技,在事件被频繁触发是,只执行一次处理 4.解决延迟引入的新问题 跟踪鼠标的移动,用鼠标当前位置,和鼠标上一次位置与子菜单上下边缘的三角形区域进行比较 运用到向量 二位向量叉乘公式 用叉乘法判断点在三角形内 最终效果:鼠标自然的移动和点击到子菜单 切换时无延迟 下面开始代码

  • JS实现超简单的仿QQ折叠菜单效果

    本文实例讲述了JS实现超简单的仿QQ折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http:/

  • 纯JS实现出生日期[年月日]下拉菜单效果

    在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用JS实现年.月.日3个下拉框的日期选择.具体代码如下: 1.新建一个js文件,如birthday.js; function DateSelector(selYear, selMonth, selDay) {//定义函数 this.selYear = selYear; this.selMonth = s

  • js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

  • js实现仿爱微网两级导航菜单效果代码

    本文实例讲述了js实现仿爱微网两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款仿爱微网两级导航菜单,tab选项卡形式的导航菜单,原生js做的tab选项卡型的导航菜单,需要鼠标点击才切换出二级子菜单,可修改成鼠标移过去就更换内容的形式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/ 具体代码如下: <html> <head> <title&g

  • JS实现具备延时功能的滑动门菜单效果

    本文实例讲述了JS实现具备延时功能的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/ 具体代码如下: <!DOCTYP

随机推荐