打印

请教：关于puterjam的JS菜单效果

jsaren [楼主]

新手上路

帖子: 16
体力: 40
威望: 0
离线: 114 天

1^# 大中小发表于 2007-2-25 21:34

我用了puterjam的JS菜单效果，在ie里面没问题，可是到了狐狸里面链接失效。
原贴和代码在这里：
http://bbs.blueidea.com/thread-1491981-1-1.html
我的网页：
http://www.webwizcn.com/default.asp

恳请高手相助！
谢谢！

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

Sheneyan

子虚乌有

荣誉管理团队

帖子: 8270
体力: 19495
威望: 177
当前: 福建厦门
离线: 25 天

专长 JS,JAVA,Oracle

2^# 大中小发表于 2007-2-25 23:26

改了pj的一小部分代码,在ff下还是有些许差异：

<html>
	<head>
	<meta http-equiv="Content-Language" content="zh-cn">
	<style>
	.b{color=#000066;cursor:pointer;/*修改为pointer样式 by Sheneyan 07.2.25*/}
	.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>
	<script type="text/javascript">
	//将原先的eval(xxx)替换成document.getElementById(xxx)形式 by Sheneyan 07.2.25
	function $(oid){return document.getElementById(oid);}
	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)
	//加入ff的opacity样式和修改cursor样式 by Sheneyan 07.2.25
	stylecode="opacity:0."+Alpha+";cursor:pointer;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(event)">'
		+'<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;
	var mt = $(this.menutable_name).getElementsByTagName("td")[0];
	this.posXY(mt)
	this.td_W=mt.scrollWidth+6 
	this.td_H=mt.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);
	var hk = $(this.hk_name);
	var hkt = $(this.hktable_name);
	//修改原来的pixelTop形式为对top直接操作，下同 By Sheneyan 07.2.25
	hk._top = hk.style.top?parseInt(hk.style.top):0;
	hk._left = hk.style.left?parseInt(hk.style.left):0;
	hkt._width = hkt.style.width?parseInt(hkt.style.width):0;
	hkt._height = hkt.style.height?parseInt(hkt.style.height):0;
	hk.style.top=hk._top+percentY+"px";
	hk.style.left=hk._left+percentX+"px";
	hkt.style.width=hkt._width+percentW+"px";
	hkt.style.height=hkt._height+percentH+"px";
	this.lastScrollX=this.lastScrollX+percentX;
	this.lastScrollY=this.lastScrollY+percentY;
	this.lastScrollW=this.lastScrollW+percentW;
	this.lastScrollH=this.lastScrollH+percentH;
	}
	//-----滑出---
	this.doOver=function(evn) {
	      var o = window.event?window.event.srcElement:evn?evn.target:null;
	      if (!o)return;
	      if (o.tagName=="TD") {
	      if (o.innerHTML.length==0 || o.innerHTML=="|") return
	      this.posXY(o)
	      this.td_W=o.scrollWidth+6  
	      this.td_H=o.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>
	
	<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\n\nmodified by Sheneyan...\npj不反对我加入我的名字吧..."
	</script>
	</head>
	<body>
	
	<script>
	CoolMenu1.insertmenu("0","欢迎使用X-Menu (菜单演示)<br>&nbsp; <font style='font-weight:lighter;'>Made By PuterJam</font>","","")
	CoolMenu1.insertmenu("0"," ","http://www.blueidea.com/","_blank")
	CoolMenu2.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 横向菜单","","")
	CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 新浪网","http://www.sina.com.cn/","_blank")
	CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 我的雅虎","http://cn.yahoo.com/","_blank")
	CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 亿唐","http://www.etang.com/","_blank")
	CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 21世纪","http://www.21cn.com/","_blank")
	CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 游侠网","http://www.ali213.net/","_blank")
	CoolMenu3.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 树形菜单","","")
	CoolMenu3.insertmenu("0","<img src=http://www.blueidea.com/img/common/logo.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>
	
	<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>

提示：您可以先修改部分代码再运行

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

jsaren [楼主]

新手上路

帖子: 16
体力: 40
威望: 0
离线: 114 天

3^# 大中小发表于 2007-2-26 10:04

非常感谢Sheneyan ！
在狐狸里面已经能够访问链接，样式虽然有点差异，但已经很不错了。
去过你的子叶，敬佩！

[ 本帖最后由 jsaren 于 2007-2-26 10:05 编辑 ]

TOP

掌握加薪筹码 IT薪资宝典给您答案！

anglefeeling

新手上路

帖子: 17
体力: 32
威望: 0
离线: 1 天

4^# 大中小发表于 2007-3-2 08:24

呵呵　谢了　二楼的兄弟　强！

esun56.com

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

csshtm

初级会员

帖子: 50
体力: 106
威望: 0
离线: 419 天

5^# 大中小发表于 2007-3-7 02:32

能兼容是一件好事,有些遗憾

TOP

lele1990

小强的老婆

高级会员

帖子: 1090
体力: 536
威望: 0
当前: 浙江台州
离线: 4 天

专长 网页设计,前端制作

6^# 大中小发表于 2007-12-29 16:44

这个好好看啊。。

我耐你

TOP

huanglongcn

风过意浓

高级会员

帖子: 448
体力: 756
威望: 0
当前: 广东东莞
离线: 7 天

专长 网页设计,策划,SEO

7^# 大中小发表于 2007-12-29 17:30

非常好的菜单效果

我的 i.grosn.com

TOP

sg803

初级会员

帖子: 72
体力: 164
威望: 2
离线: 4 天

8^# 大中小发表于 2008-1-4 14:09

很好的东西～～～～

http://www.sg803.com

TOP

nnzz

愿闻其详

初级会员

帖子: 99
体力: 182
威望: 0
当前: 江苏南京
离线: 8 天

9^# 大中小发表于 2008-1-4 14:25

好东东！！！！

TOP

minsibing

新手上路

帖子: 2
体力: 10
威望: 0
离线: 303 天

10^# 大中小发表于 2008-1-4 16:49

太好了，不错！

TOP

272

佛剑分说

中级会员

帖子: 188
体力: 350
威望: 0
离线: 38 天

11^# 大中小发表于 2008-3-24 14:27

如果想把td 换成列表li 的模式是否可行呢

[ 本帖最后由 272 于 2008-3-24 14:34 编辑 ]

学无止境

TOP