经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 请教：关于puterjam的JS菜单效果

查看: 8732|回复: 10

请教：关于puterjam的JS菜单效果 [复制链接]

jsaren　楼主

初级会员

帖子: 18
体力: 50
威望: 0

发表于 2007-2-25 21:34:04 |显示全部楼层

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

恳请高手相助！
谢谢！

西部数码顶级域名注册商39元抢注！

使用道具举报

Sheneyan　

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2007-2-25 23:26:04 |显示全部楼层

改了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>

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

子叶：子乌的叶子
子乌书简

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报