js各种脚本

<style>

/* 先把这个 xmenu 的样式放到css里 */

.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}

</style>

http://lexrus.blueidea.com

这是把事件动作绑定到菜单上的函数

function attachXMenu(objid){

var tds=objid.getElementsByTagName('td');

for(var i=0;i<tds.length;i++){

with(tds[i]){

onmouseover=function(){

with(this){

filters[0].apply();

style.background='#66CCFF'; //这是鼠标移上去时的背景颜色

style.border='1px solid #ffffff'; //边框

style.color='black'; //文字颜色

filters[0].play();

}

onmouseout=function(){

with(this){

filters[0].apply();

style.background='#336699'; //这是鼠标离开时的背景颜色

style.border='1px solid #336699'; //边框

style.color='#ffffff'; //文字颜色

filters[0].play();

}

</script>

<tr>

</tr>

</table>

<br/>

</table>

<!--

*{margin:0;padding:0;border:0;}

body {

font-family: arial, 宋体, serif;

font-size:12px;

}

#nav {

width:180px;

line-height: 24px;

list-style-type: none;

text-align:left;

/*定义整个ul菜单的行高和背景色*/

}

/*==================一级目录===================*/

#nav a {

width: 160px;

display: block;

padding-left:20px;

/*Width(一定要)，否则下面的Li会变形*/

}

#nav li {

background:#CCC; /*一级目录的背景色*/

border-bottom:#FFF 1px solid; /*下面的一条白边*/

float:left;

/*float：left,本不应该设置，但由于在Firefox不能正常显示

继承Nav的width,限制宽度，li自动向下延伸*/

}

#nav li a:hover{

background:#CC0000; /*一级目录onMouseOver显示的背景色*/

}

#nav a:link {

color:#666; text-decoration:none;

}

#nav a:visited {

color:#666;text-decoration:none;

}

#nav a:hover {

color:#FFF;text-decoration:none;font-weight:bold;

}

/*==================二级目录===================*/

#nav li ul {

list-style:none;

text-align:left;

}

#nav li ul li{

background: #EBEBEB; /*二级目录的背景色*/

}

#nav li ul a{

padding-left:20px;

width:160px;

/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/

}

/*下面是二级目录的链接样式*/

#nav li ul a:link {

color:#666; text-decoration:none;

}

#nav li ul a:visited {

color:#666;text-decoration:none;

}

#nav li ul a:hover {

color:#F3F3F3;

text-decoration:none;

font-weight:normal;

background:#CC0000;

/* 二级onmouseover的字体颜色、背景色*/

}

/*==============================*/

#nav li:hover ul {

left: auto;

}

#nav li.sfhover ul {

left: auto;

}

#content {

clear: left;

}

#nav ul.collapsed {

display: none;

}

-->

#PARENT{

width:300px;

padding-left:20px;

}

</style>

<li><a href="#">网页教学网</a></li>

<li><a href="#">网页教学网</a></li>

<li><a href="#">网页教学网</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

var LastLeftID = "";

function menuFix() {

var obj = document.getElementById("nav").getElementsByTagName("li");

for (var i=0; i<obj.length; i++) {

obj[i].onmouseover=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover";

}

obj[i].onMouseDown=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover";

}

obj[i].onMouseUp=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover";

}

obj[i].onmouseout=function() {

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");

}

function DoMenu(emid)

{

var obj = document.getElementById(emid);

obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");

if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu

{

document.getElementById(LastLeftID).className = "collapsed";

}

LastLeftID = emid;

}

function GetMenuID()

{

var MenuID="";

var _paramStr = new String(window.location.href);

var _sharpPos = _paramStr.indexOf("#");

if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)

{

_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);

}

else

{

_paramStr = "";

}

if (_paramStr.length > 0)

{

var _paramArr = _paramStr.split("&");

if (_paramArr.length>0)

{

var _paramKeyVal = _paramArr[0].split("=");

if (_paramKeyVal.length>0)

{

MenuID = _paramKeyVal[1];

}

if (_paramArr.length>0)

{

var _arr = new Array(_paramArr.length);

}

//取所有#后面的，菜单只需用到Menu

//for (var i = 0; i < _paramArr.length; i++)

{

var _paramKeyVal = _paramArr[i].split('=');

if (_paramKeyVal.length>0)

{

_arr[_paramKeyVal[0]] = _paramKeyVal[1];

}

if(MenuID!="")

{

DoMenu(MenuID)

}

GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果

menuFix();

--></script>

***************
多级右键菜单：

<HTML><HEAD><TITLE>多级右键菜单 - 51windows.Net</TITLE>

<STYLE type=text/css>BODY {

FONT-SIZE: 12px;

}

.info{FONT-SIZE: 14px;color:#FFFFFF;font-family:@Tahoma,@宋体;width:20px}

TABLE {

CURSOR: default; FONT-SIZE: 12px; MARGIN: 0px

}

TR {

HEIGHT: 20px

}

TR.over {

BACKGROUND-COLOR: #000080; COLOR: #ffffff; CURSOR: default; FONT-SIZE: 12px

}

TR.out {

BACKGROUND-COLOR: #efefef; COLOR: #000000; FONT-SIZE: 12px

}

DIV.rm_div {

BACKGROUND-COLOR: #efefef; BORDER-BOTTOM: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; DISPLAY: none; FILTER: Alpha(Opacity='95'); HEIGHT: 0px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; WIDTH: 0px

}

HR.sperator {

BORDER-BOTTOM: #ffffff 1px inset; BORDER-LEFT: #ffffff 1px inset; BORDER-RIGHT: #ffffff 1px inset; BORDER-TOP: #ffffff 1px inset; WIDTH: 95%

}

.w2kfont {

FONT-FAMILY: Tahoma; FONT-SIZE: 8pt

}

</STYLE>

<!--

//此代码由51windows.net收集，做少量更改。

function RightMenu()

{

this.AddExtendMenu=AddExtendMenu;

this.AddItem=AddItem;

this.GetMenu=GetMenu;

this.HideAll=HideAll;

this.I_OnMouseOver=I_OnMouseOver;

this.I_OnMouseOut=I_OnMouseOut;

this.I_OnMouseUp=I_OnMouseUp;

this.P_OnMouseOver=P_OnMouseOver;

this.P_OnMouseOut=P_OnMouseOut;

A_rbpm = new Array();

HTMLstr = "";

HTMLstr += "\n";

HTMLstr += "\n";

HTMLstr += "\n";

HTMLstr += "<div id='E_rbpm' class='rm_div'>\n";

// rbpm = right button pop menu

HTMLstr += "<table width='100%' border='0' cellspacing='0'>\n";

HTMLstr += "<tr><td height='264' width='20' valign='bottom' bgcolor='#000000' onclick=window.event.cancelBubble=true; class=info>作制娃海<br>:<br>窗视忧无\n";

HTMLstr += "</td><td height='264' width='120' style='padding: 1' valign='bottom'>\n";

HTMLstr += "<table width='100%' border='0' cellspacing='0'>\n";

HTMLstr += "\n";

HTMLstr += "</table></td></tr></table>\n";

HTMLstr += "</div>\n";

HTMLstr += "";

HTMLstr += "\n";

HTMLstr += "\n";

}

function AddExtendMenu(id,img,wh,name,parent)

{

var TempStr = "";

eval("A_"+parent+".length++");

eval("A_"+parent+"[A_"+parent+".length-1] = id"); // 将此项注册到父菜单项的ID数组中去

TempStr += "<div id='E_"+id+"' class='rm_div'>\n";

TempStr += "<table width='100%' border='0' cellspacing='0'>\n";

TempStr += "";

TempStr += "</table>\n";

TempStr += "</div>\n";

TempStr += "";

TempStr += "";

HTMLstr = HTMLstr.replace("",TempStr);

eval("A_"+id+" = new Array()");

TempStr = "";

TempStr += "\n";

TempStr += "<tr id='P_"+id+"' class='out'";

TempStr += " onmouseover='P_OnMouseOver(\""+id+"\",\""+parent+"\")'";

TempStr += " onmouseout='P_OnMouseOut(\""+id+"\",\""+parent+"\")'";

TempStr += " onmouseup=window.event.cancelBubble=true;";

TempStr += " onclick=window.event.cancelBubble=true;";

TempStr += "><td nowrap>";

TempStr += "<font face='Wingdings' style='font-size:18px'>0</font> "+name+" </td><td style='font-family: webdings; text-align: ;'>4";

TempStr += "</td></tr>\n";

TempStr += "";

HTMLstr = HTMLstr.replace("",TempStr);

}

function AddItem(id,img,wh,name,parent,location)

{

var TempStr = "";

var ItemStr = "";

if(id == "sperator")

{

TempStr += ItemStr+"\n";

TempStr += "<tr class='out' onclick='window.event.cancelBubble=true;' onmouseup='window.event.cancelBubble=true;'><td colspan='2' height='1'><hr class='sperator'></td></tr>";

TempStr += "";

HTMLstr = HTMLstr.replace("",TempStr);

return;

}

if(HTMLstr.indexOf(ItemStr) != -1)

{

alert("I_"+id+"already exist!");

return;

}

TempStr += ItemStr+"\n";

TempStr += "<tr id='I_"+id+"' class='out'";

TempStr += " onmouseover='I_OnMouseOver(\""+id+"\",\""+parent+"\")'";

TempStr += " onmouseout='I_OnMouseOut(\""+id+"\")'";

TempStr += " onclick='window.event.cancelBubble=true;'";

if(location == null)

TempStr += " onmouseup='I_OnMouseUp(\""+id+"\",\""+parent+"\",null)'";

else

TempStr += " onmouseup='I_OnMouseUp(\""+id+"\",\""+parent+"\",\""+location+"\")'";

TempStr += "><td nowrap>";

TempStr +="<font face='Wingdings' style='font-size:18px'>"+wh+"</font> "+ name+" ";//以Wingdings字体做为图片，要改成图片，请在这里更改

TempStr += "</td><td></td></tr>\n";

TempStr += "";

HTMLstr = HTMLstr.replace("",TempStr);

}

function GetMenu()

{

return HTMLstr;

}

function I_OnMouseOver(id,parent)

{

var Item;

if(parent != "rbpm")

{

var ParentItem;

ParentItem = eval("P_"+parent);

ParentItem.className="over";

}

Item = eval("I_"+id);

Item.className="over";

HideAll(parent,1);

}

function I_OnMouseOut(id)

{

var Item;

Item = eval("I_"+id);

Item.className="out";

}

function I_OnMouseUp(id,parent,location)

{

var ParentMenu;

window.event.cancelBubble=true;

OnClick();

ParentMenu = eval("E_"+parent);

ParentMenu.display="none";

if(location == null)

eval("Do_"+id+"()");

else

window.open(location);

}

function P_OnMouseOver(id,parent)

{

var Item;

var Extend;

var Parent;

if(parent != "rbpm")

{

var ParentItem;

ParentItem = eval("P_"+parent);

ParentItem.className="over";

}

HideAll(parent,1);

Item = eval("P_"+id);

Extend = eval("E_"+id);

Parent = eval("E_"+parent);

Item.className="over";

Extend.style.display="block";

Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth-4;

if(Extend.style.posLeft+Extend.offsetWidth > document.body.scrollLeft+document.body.clientWidth)

Extend.style.posLeft=Extend.style.posLeft-Parent.offsetWidth-Extend.offsetWidth+8;

if(Extend.style.posLeft < 0) Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth;

Extend.style.posTop=Parent.offsetTop+Item.offsetTop+1;

if(Extend.style.posTop+Extend.offsetHeight > document.body.scrollTop+document.body.clientHeight)

Extend.style.posTop=document.body.scrollTop+document.body.clientHeight-Extend.offsetHeight;

if(Extend.style.posTop < 0) Extend.style.posTop=0;

}

function P_OnMouseOut(id,parent)

{

}

function HideAll(id,flag)

{

var Area;

var Temp;

var i;

if(!flag)

{

Temp = eval("E_"+id);

Temp.style.display="none";

}

Area = eval("A_"+id);

if(Area.length)

{

for(i=0; i < Area.length; i++)

{

HideAll(Area[i],0);

Temp = eval("E_"+Area[i]);

Temp.style.display="none";

Temp = eval("P_"+Area[i]);

Temp.className="out";

}

document.onmouseup=OnMouseUp;

document.onclick=OnClick;

function OnMouseUp()

{

if(window.event.button == 2)

{

var PopMenu;

PopMenu = eval("E_rbpm");

HideAll("rbpm",0);

PopMenu.style.display="block";

PopMenu.style.posLeft=document.body.scrollLeft+window.event.clientX;

PopMenu.style.posTop=document.body.scrollTop+window.event.clientY;

if(PopMenu.style.posLeft+PopMenu.offsetWidth > document.body.scrollLeft+document.body.clientWidth)

PopMenu.style.posLeft=document.body.scrollLeft+document.body.clientWidth-PopMenu.offsetWidth;

if(PopMenu.style.posLeft < 0) PopMenu.style.posLeft=0;

if(PopMenu.style.posTop+PopMenu.offsetHeight > document.body.scrollTop+document.body.clientHeight)

PopMenu.style.posTop=document.body.scrollTop+document.body.clientHeight-PopMenu.offsetHeight;

if(PopMenu.style.posTop < 0) PopMenu.style.posTop=0;

}

function OnClick()

{

HideAll("rbpm",0);

}

// Add Your Function on following

function Do_viewcode(){window.location="view-source:"+window.location.href;}

function Do_help(){window.showHelp(window.location);}

function Do_exit() {window.close();}

function Do_refresh() {window.location.reload();}

function Do_back() {history.back();}

function Do_forward() {history.forward();}

function Do_help(){alert("帮助")}

-->

</SCRIPT>

<DIV id=snwcwt> 请点击右键</DIV>

<!--

var menu = new RightMenu();

menu.AddItem("update","start_update","4","<font class=w2kfont>Web Update</font>","rbpm","http://www.51windows.net/");

menu.AddItem("suan","suan","a","大蒜之乡","rbpm","http://www.51windows.net");

menu.AddItem("sperator","","","","rbpm",null);

menu.AddExtendMenu("program","start_pro","24","程序<font class=w2kfont>(<u>P</u>)</font>","rbpm",null);

menu.AddExtendMenu("p_acc","folder","+","附件","program",null);

menu.AddItem("p_acc1","html","+","<font class=w2kfont>Microsoft FrontPage 2000</font>","program","51w/game/");

menu.AddItem("p_acc2","html","+","<font class=w2kfont>Norton AntiVirus Corporate Edition</font>","program","http://www.51windows.net");

menu.AddExtendMenu("p_lgame","folder","16","小游戏","p_acc",null);

menu.AddItem("p_game1","folder","+","扫雷","p_lgame","http://www.51windows.net/game/");

menu.AddItem("p_game2","folder","+","超级玛力","p_lgame","http://www.51windows.net/game/");

menu.AddItem("p_game3","folder","+","五子棋","p_lgame","http://www.51windows.net/game/");

menu.AddItem("p_game4","folder","+","俄罗斯方块","p_lgame","http://www.51windows.net/game/");

menu.AddExtendMenu("doc","start_doc","24","文档<font class=w2kfont>(<u>D</u>)</font>","rbpm",null);

menu.AddItem("d_photo","folder","+","我的邮票","doc",null);

menu.AddExtendMenu("fav","start_fav","24","收藏<font class=w2kfont>(<u>A</u>)</font>","rbpm",null);

menu.AddExtendMenu("f_bbs","folder","16","论坛","fav",null);

menu.AddItem("f_bbs1","html","+","蓝色理想","f_bbs","http://www.blueidea.com/bbs/");

menu.AddItem("f_bbs2","html","+","无忧脚本","f_bbs","http://www.51js.com/");

menu.AddItem("f_bbs3","html","+","CSDN专家门诊","f_bbs","http://www.csdn.net/");

menu.AddItem("f_bbs4","html","+","洪恩在线网上交流","f_bbs","http://www.51windows.net");

menu.AddExtendMenu("f_webpage","folder","16","网页制作","fav",null);

menu.AddItem("f_webpage1","html","","<font disabled>(空)</font>","f_webpage","http://www.51windows.net");

menu.AddExtendMenu("f_study","folder","16","网上学习","fav",null);

menu.AddItem("f_s1","html","","<font disabled>(空)</font>","f_study","http://matrix.hongen.com/forum/");

menu.AddExtendMenu("f_link","folder","16","友情链接","fav",null);

menu.AddItem("f_link1","html","+","无忧视窗","f_link","http://www.51windows.net");

menu.AddExtendMenu("setting","start_set","24","设置<font class=w2kfont>(<u>S</u>)</font>","rbpm",null);

menu.AddItem("s_panel","folder","+","控制面板(C)","setting","http://www.51windows.net");

menu.AddItem("sperator","","","","setting",null);

menu.AddItem("s_data","s_user","+","用户资料(D)","setting","http://www.51windows.net");

menu.AddItem("s_display1","s_taskbar","+","任务栏和开始菜单(T)","setting","http://www.51windows.net");

menu.AddExtendMenu("find","start_find","24","查找<font class=w2kfont>(<u>F</u>)","rbpm",null);

menu.AddItem("l_search","search","4","文件或文件夹上(<u>F</u>)

","find","http://www.51windows.net");

menu.AddItem("i_search","esearch","4","在Internet上(<u>I</u>)

","find","http://www.51windows.net");

menu.AddItem("u_search","f_user","4","用户(<u>P</u>)

","find","http://www.51windows.net");

menu.AddItem("help","start_help","V"," 帮助<font class=w2kfont>(<u>H</u>)</font>","rbpm",null);

menu.AddItem("sperator","","","","rbpm",null);

menu.AddItem("logoff","start_logoff","v"," 注销<font class=w2kfont>(<u>L</u>)</font>","rbpm",null);

menu.AddItem("shut","start_shut","x","退出<font class=w2kfont>(<u>U</u>)</font>","rbpm",null);

document.writeln(menu.GetMenu());

-->

</SCRIPT>

</TD></TR>

</TABLE>

</BODY>

</HTML>

效果不错的菜单：

<style>

/* 先把这个 xmenu 的样式放到css里 */

.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}

</style>

http://lexrus.blueidea.com

这是把事件动作绑定到菜单上的函数

function attachXMenu(objid){

var tds=objid.getElementsByTagName('td');

for(var i=0;i<tds.length;i++){

with(tds[i]){

onmouseover=function(){

with(this){

filters[0].apply();

style.background='#66CCFF'; //这是鼠标移上去时的背景颜色

style.border='1px solid #ffffff'; //边框

style.color='black'; //文字颜色

filters[0].play();

}

onmouseout=function(){

with(this){

filters[0].apply();

style.background='#336699'; //这是鼠标离开时的背景颜色

style.border='1px solid #336699'; //边框

style.color='#ffffff'; //文字颜色

filters[0].play();

}

</script>

<tr>

</tr>

</table>

<br/>

</table>

posted on 2007-12-14 16:03 simhare 阅读(288) 评论(0) 收藏举报

刷新页面返回顶部

js各种脚本

导航

公告