JS特效代码--一个很Cool的JS菜单效果

JavaScript08

JS特效代码--一个很Cool的JS菜单效果,第1张

<script>

function CoolMenuControl(){

// 常规变量 this lastScrollX= this lastScrollY= this lastScrollW= this lastScrollH= this td_X= this td_Y= this td_W= this td_H= this td= this mouseon= this current=null this _namethis table_namethis menudiv_namethis menutable_namethis ml= this menuarray=new Array()this speedthis 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 in="" var cellcount= var lastcellcount= this _name=name+"" this table_name=name+"table" this menudiv_name=name+"menudiv" this menutable_name=name+"menutable" this speed=speed

for (i= i<this menuarray lengthi++)  {  if (this menuarray[i] type==" ") cellcount=cellcount+  if (this menuarray[i] type==" " || this menuarray[i] type==" ") {cellcount= }  if (lastcellcount<cellcount) {lastcellcount++}    }

//alert(cellcount)

stylecode="cursor:handfilter:Alpha(style= opacity="+Alpha+")background color:"+bgc

suspendcode="<DIV id="+this _name+" style= POSITION:absoluteonclick= "+name+" doClick() >"  +"<table id="+this table_name+" border= width= cellspacing= style= border collapse: collapse bordercolor= "+bdc+" >"  +"<tr><td height= style= "+stylecode+" ></td></tr></table></div>"document write(suspendcode)var fcell=true for (i= i<this menuarray lengthi++) {  switch(this menuarray[i] type)  {  case " ":  t=cellcount*  if (t<= )   {  in+= <tr><td colspan= class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value  }  else  {  in+= <tr><td colspan= +t+ class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value  }  fcell=true  break case " ":  t=(cellcount )*  if (t<= )   {  in+= <tr><td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value  }  else  {  in+= <tr><td width= ><td colspan= +t+ onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value  }  fcell=true  break   case " ":  if (fcell)  {  in+= <tr><td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value fcell=false  }  else  {  in+= <td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value }  break } } in= <div id= +this menudiv_name+ onmousemove=" +name+ doOver()"> + <table id= +this menutable_name+ border= cellpadding=" " class="menu" cellspacing=" "> +in  + </table></div>//alert(in) document write(in)

this lastScrollX= this lastScrollY= this posXY(eval(this menutable_name) cells[ ]) this td_W=eval(this menutable_name) cells[ ] scrollWidth+   this td_H=eval(this menutable_name) cells[ ] scrollHeight setInterval(name+" scrollback()" ) }

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

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

// 滑动处理 this scrollback=function(){ diffX=this td_X diffY=this td_Y 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>)percentX=Math ceil(percentX)else percentX=Math floor(percentX)if(percentY>)percentY=Math ceil(percentY)else percentY=Math floor(percentY)if(percentW>)percentW=Math ceil(percentW)else percentW=Math floor(percentW)if(percentH>)percentH=Math ceil(percentH)else percentH=Math floor(percentH)

eval(this _name) style pixelTop+=percentYeval(this _name) style pixelLeft+=percentXeval(this table_name) style pixelWidth+=percentWeval(this table_name) style pixelHeight+=percentH

this lastScrollX=this lastScrollX+percentXthis lastScrollY=this lastScrollY+percentYthis lastScrollW=this lastScrollW+percentWthis lastScrollH=this lastScrollH+percentH}

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

// 绝对定位 this posXY=function(obj){  _left=obj offsetLeft  _top=obj offsetTop  vParent = obj offsetParent   while (vParent tagName toUpperCase() != "BODY")  {  _left += vParent offsetLeft _top += vParent offsetTop vParent = vParent offsetParent }    this td_X=_left  this td_Y=_top }

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

} </script>

<head><meta equiv="Content Language" content="zh cn"><style>b{color=# cursor:hand} menu { font family:Arialcursor:Defaultfont size: pxborder: px # solidborder collapse: collapsefilter:progid:DXImageTransform Microsoft Gradient(gradienttype= startcolorstr=#ffffff endcolorstr=#dddddd)  progid:DXImageTransform Microsoft Shadow(direction= color=#cccccc strength= )} ht{ font weight:bold } </style><! 第一步 实体化X Menu类  用法:  var <实体变量>new CoolMenuControl() ><script language="javascript">var CoolMenu =new CoolMenuControl() var about=new Array() about[ ]="关于X Menu菜单nnAuthor:PuterJamnCopyright n转载请通知本人" about[ ]="关于作者nn"这家伙很懒 什么也没留下!!"

</script></head><body><! 第二步 建立菜单项目    用法:  <实体变量>insertmenu(类型 Html代码 链接网址 目标)   类型 0代表菜单标题 1代表树型菜单子项目 2代表横向菜单子项目   Html代码 显示在菜单上的Html代码  链接网址 不用多说了 网址或Javascript脚本  目标 默认为空 既不在本页打开 "_blank"代表在新的页面打开 例如:   CoolMenu insertmenu(" " "<img src=// blueidea /img/icon/arrow gif>新浪网" " "_blank")   ><script>CoolMenu insertmenu(" " "本站首页" "" "") CoolMenu insertmenu(" " "新闻中心" " "_blank") CoolMenu insertmenu(" " "文章中心" " "_blank") CoolMenu insertmenu(" " "图片欣赏" " "_blank") CoolMenu insertmenu(" " "软件下载" " "_blank") CoolMenu insertmenu(" " "娱乐欣赏" " "_blank") </script>

lishixinzhi/Article/program/Java/JSP/201311/19958

<script language="vbscript" >

public x( ) x( )="东城 西城 崇文 宣武 朝阳 丰台 石景山 海淀 门头沟 房山 通州 顺义 昌平 大兴 平谷 怀柔 密云 延庆" x( )="黄浦 卢湾 徐汇 长宁 静安 普陀 闸北 虹口 杨浦 闵行 宝山 嘉定 浦东 金山 松江 青浦 南汇 奉贤 崇明" x( )="和平 东丽 河东 西青 河西 津南 南开 北辰 河北 武清 红挢 塘沽 汉沽 大港 宁河 静海 宝坻 蓟县" x( )="万州 涪陵 渝中 大渡口 江北 沙坪坝 九龙坡 南岸 北碚 万盛 双挢 渝北 巴南 黔江 长寿 綦江 潼南 铜梁 大足 荣昌 壁山 梁平 城口 丰都 垫江 武隆 忠县 开县 云阳 奉节 巫山 巫溪 石柱 秀山 酉阳 彭水 江津 合川 永川 南川" x( )="石家庄 邯郸 邢台 保定 张家口 承德 廊坊 唐山 秦皇岛 沧州 衡水" x( )="太原 大同 阳泉 长治 晋城 朔州 吕梁 忻州 晋中 临汾 运城" x( )="呼和浩特 包头 乌海 赤峰 呼伦贝尔 阿拉善盟 通辽 兴安盟 乌兰察布 锡林郭勒盟 巴彦淖尔 鄂尔多斯" x( )="沈阳 大连 鞍山 抚顺 本溪 丹东 锦州 营口 阜新 辽阳 盘锦 铁岭 朝阳 葫芦岛" x( )="长春 吉林 四平 辽源 通化 白山 松原 白城 延边" x( )="哈尔滨 齐齐哈尔 牡丹江 佳木斯 大庆 绥化 鹤岗 鸡西 黑河 双鸭山 伊春 七台河 大兴安岭" x( )="南京 镇江 苏州 南通 扬州 盐城 徐州 连云港 常州 无锡 宿迁 泰州 淮安" x( )="杭州 宁波 温州 嘉兴 湖州 绍兴 金华 衢州 舟山 台州 丽水" x( )="合肥 芜湖 蚌埠 马鞍山 淮北 铜陵 安庆 黄山 滁州 宿州 池州 淮南 巢湖 阜阳 六安 宣城 亳州" x( )="福州 厦门 莆田 三明 泉州 漳州 南平 龙巖 宁德" x( )="南昌市 景德镇 九江 鹰潭 萍乡 新馀 赣州 吉安 宜春 抚州 上饶" x( )="济南 青岛 淄博 枣庄 东营 烟台 潍坊 济宁 泰安 威海 日照 莱芜 临沂 德州 聊城 滨州 菏泽" x( )="郑州 开封 洛阳 平顶山 安阳 鹤壁 新乡 焦作 濮阳 许昌 漯河 三门峡 南阳 商丘 信阳 周口 驻马店 济源" x( )="武汉 宜昌 荆州 襄樊 黄石 荆门 黄冈 十堰 恩施 潜江 天门 仙桃 随州 咸宁 孝感 鄂州" x( )="长沙 常德 株洲 湘潭 衡阳 岳阳 邵阳 益阳 娄底 怀化 郴州 永州 湘西 张家界" x( )="广州 深圳 珠海 汕头 东莞 中山 佛山 韶关 江门 湛江 茂名 肇庆 惠州 梅州 汕尾 河源 阳江 清远 潮州 揭阳 云浮" x( )="南宁 柳州 桂林 梧州 北海 防城港 钦州 贵港 玉林 南宁地区 柳州地区 贺州 百色 河池" x( )="海口 三亚" x( )="成都 绵阳 德阳 自贡 攀枝花 广元 内江 乐山 南充 宜宾 广安 达川 雅安 眉山 甘孜 凉山 泸州" x( )="贵阳 六盘水 遵义 安顺 铜仁 黔西南 毕节 黔东南 黔南" x( )="昆明 大理 曲靖 玉溪 昭通 楚雄 红河 文山 思茅 西双版纳 保山 德宏 丽江 怒江 迪庆 临沧" x( )="拉萨 日喀则 山南 林芝 昌都 阿里 那曲" x( )="西安 宝鸡 咸阳 铜川 渭南 延安 榆林 汉中 安康 商洛" x( )="兰州 嘉峪关 金昌 白银 天水 酒泉 张掖 武威 定西 陇南 平凉 庆阳 临夏 甘南" x( )="银川 石嘴山 吴忠 固原" x( )="西宁 海东 海南 海北 黄南 玉树 果洛 海西" x( )="乌鲁木齐 石河子 克拉玛依 伊犁 巴音郭勒 昌吉 克孜勒苏柯尔克孜 博尔塔拉 吐鲁番 哈密 喀什 和田 阿克苏" x( )="" x( )="" x( )="台北 高雄 台中 台南 屏东 南投 云林 新竹 彰化 苗栗 嘉义 花莲 桃园 宜兰 基隆 台东 金门 马祖 澎湖"

lishixinzhi/Article/program/Java/JSP/201311/20384

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<script src="./js/jquery.js" type="text/javascript"></script>

<style type="text/css">

ul li{ list-style-type:none}

#a a{ text-decoration:nonecolor:#000}

#a a:hover,a:hover{color:#FC6}

#a{ background-color:#cccmargin-left:100pxmargin-right:100pxfloat:left}

#b{background-color:#fffmargin-left:100pxmargin-right:100pxfloat:leftdisplay:none}

#c{background-color:#fffmargin-left:100pxmargin-right:100pxfloat:leftdisplay:none}

#d{background-color:#fffmargin-left:100pxmargin-right:100pxfloat:leftdisplay:none}

</style>

<script>

$(document).ready(function(e) {

$("#aa").hover(function(){

$("#b").show()

$("#c").hide()

$("#d").hide()

})

$("#bb").hover(function(){

$("#c").show()

$("#b").hide()

$("#d").hide()

})

$("#cc").hover(function(){

$("#d").show()

$("#c").hide()

$("#b").hide()

})

})

</script>

</head>

<body>

<div id="a">

<ul>

<li><a href="#" id="aa">推荐主题</a></li>

<li><a href="#" id="bb">发货及配送</a></li>

<li><a href="#" id="cc">在亚马逊订购</a></li>

<li><a href="#">支付方式与促销活动</a></li>

<li><a href="#">如何管理我的帐户</a></li>

<li><a href="#">Fire和Kindle</a></li>

<li><a href="#">数字服务与内容</a></li>

</ul>

</div>

<div id="b">

<ul>

<li><a href="#">推荐主题1</a></li>

<li><a href="#">推荐主题</a></li>

<li><a href="#">推荐主题</a></li>

</ul>

</div>

<div id="c">

<ul>

<li><a href="#">推荐主题2</a></li>

<li><a href="#">推荐主题</a></li>

<li><a href="#">推荐主题</a></li>

</ul>

</div>

<div id="d">

<ul>

<li><a href="#">推荐主题3</a></li>

<li><a href="#">推荐主题</a></li>

<li><a href="#">推荐主题</a></li>

</ul>

</div>

</div>

</body>

</html>

这样可以吗