热门源码
|
热门软件
|
高级搜索
|
网站地图
|
文章
·
软件投稿
全站首页
建站资讯
源码下载
站长素材
站长书籍
网页特效
网站编程
网站运营
代码打包
loading...
服务器技术
网站运营
网站编程
数据库应用
数码设计
web安全
ASP源码
PHP源码
JSP源码
.NET源码
CGI源码
其它源码
系统软件
素材模板
精品字体
图标矢量
屏保主题
网页图标
辅助插件
网站制作书籍
操作系统
设计教程
数据库书籍
文学专著
网站运营书籍
页面布局
表单特效
综合技巧
图形特效
文本操作
链接特效
鼠标特效
按钮特效
菜单导航
窗口特效
状态系统
页面特效
ASP编程
PHP编程
XML编程
JSP编程
Javascript
.NET编程
XHTML
HTML
AJAX编程
Ext编程
搜索引擎
建站资讯
网络推广
站长访谈
网赚教程
CMS应用
互联网资讯
幻灯焦点图
技术框架
表单输入
弹出窗口
翻页滚动
图片展示
图标按钮
全屏广告
综合布局
对联广告
菜单导航
在线客服
本站推荐
:
X-Menu 一个flash风格的JS菜单效果
脚本类别:
菜单导航
添加时间:
2009-01-20
查看次数:
作者:
PuterJam
脚本代码
<script> 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<this.menuarray.length;i++) { if (this.menuarray[i].type=="2") cellcount=cellcount+1 if (this.menuarray[i].type=="1" || this.menuarray[i].type=="0") {cellcount=0} if (lastcellcount<cellcount) {lastcellcount++} } //alert(cellcount) stylecode="cursor:hand;filter:Alpha(style=0,opacity="+Alpha+");background-color:"+bgc suspendcode="<DIV id="+this.hk_name+" style='POSITION:absolute;' onclick='"+name+".doClick()'>" +"<table id="+this.hktable_name+" border='1' width='0' cellspacing='0' style='border-collapse: collapse' bordercolor='"+bdc+"'>" +"<tr><td height='18' style='"+stylecode+"'></td></tr></table></div>"; document.write(suspendcode); var fcell=true for (i=0;i<this.menuarray.length;i++) { switch(this.menuarray[i].type) { case "0": t=cellcount*2 if (t<=0) { inhtml+='<tr><td colspan=2 class=ht onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } else { inhtml+='<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 "1": t=(cellcount-1)*2 if (t<=0) { inhtml+='<tr><td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } else { inhtml+='<tr><td width=6><td colspan='+t+' onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } fcell=true break; case "2": if (fcell) { inhtml+='<tr><td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value; fcell=false } else { inhtml+='<td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value; } break; } } inhtml='<div id='+this.menudiv_name+' onmousemove="'+name+'.doOver()">' +'<table id='+this.menutable_name+' border="0" cellpadding="2" class="menu" cellspacing="4">' +inhtml +'</table></div>'; //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") } } </script> <head> <meta http-equiv="Content-Language" content="zh-cn"> <style> .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 } </style> <!-- 第一步:实体化X-Menu类 用法: var <实体变量>.new CoolMenuControl() ---> <script language="javascript"> 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" </script> </head> <body> <!-- 第二步:建立菜单项目--- 用法: <实体变量>.insertmenu(类型,Html代码,链接网址,目标) 类型:0代表菜单标题,1代表树型菜单子项目,2代表横向菜单子项目 Html代码:显示在菜单上的Html代码 链接网址:不用多说了,网址或Javascript脚本 目标:默认为空,既不在本页打开;"_blank"代表在新的页面打开 例如: CoolMenu2.insertmenu("2","<img src=/templets/images/arrow.gif> 新浪网","http://www.sina.com.cn/","_blank") --> <script> CoolMenu1.insertmenu("0","欢迎使用X-Menu (菜单演示)<br> <font style='font-weight:lighter;'>Made By PuterJam</font>","","") CoolMenu1.insertmenu("0"," ","http://www.blueidea.com/","_blank") CoolMenu2.insertmenu("0","<img src=/uploads/allimg/090120/132J54X6-0.gif> 横向菜单","","") CoolMenu2.insertmenu("2","<img src=/templets/images/arrow.gif> 新浪网","http://www.sina.com.cn/","_blank") CoolMenu2.insertmenu("2","<img src=/templets/images/arrow.gif> 我的雅虎","http://cn.yahoo.com/","_blank") CoolMenu2.insertmenu("2","<img src=/templets/images/arrow.gif> 亿唐","http://www.etang.com/","_blank") CoolMenu2.insertmenu("2","<img src=/templets/images/arrow.gif> 21世纪","http://www.21cn.com/","_blank") CoolMenu2.insertmenu("2","<img src=/templets/images/arrow.gif> 共享世纪","http://www.2ky.cn/","_blank") CoolMenu3.insertmenu("0","<img src=/templets/images/nofollow.gif> 树形菜单","","") CoolMenu3.insertmenu("0","<img src=/uploads/allimg/090120/132J55K6-1.gif> ","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)","") </script> <!-- 第三步:建立菜单--- 用法: <实体变量>.init(实体变量名,边框颜色,背景颜色,滑动速度,背景半透明度) '实体变量名'必须与<实体变量>相同 如果背景颜色="transparent"既为完全透明 例如: CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15) --> <script>CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)</script> <script>CoolMenu2.init("CoolMenu2","#002000","#00FF80",0.2,10)</script> <script>CoolMenu3.init("CoolMenu3","#002000","#f0FF00",0.3,25)</script> </body>
loading...
当前页面所处路径为
共享世纪
/
网页特效
/
菜单导航
/ ,本特效的Tag为:
共享世纪
一个flash风格的JS菜单效果
会员登陆
close X
用户名
密 码
验证码
一个倡导开源、绿色、共享的站长资源门户。
推荐关注站长微博:lennyash