鼠标特效windows xp风格的鼠标右键菜单
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件<html><head><title>mouse-menu</title>
<meta content="text/html; charset=gb2312" http-equiv=content-type>
<meta content="mshtml 5.00.2614.3500" name=generator>
<meta content=frontpage.editor.document name=progid>
<style>.menutable {
background-color: #ffffff; border-bottom: #307ce8 1px solid; border-left: #307ce8 5px solid; border-right: #307ce8 1px solid; border-top: #94bcf3 1px solid; font-size: 12px; position: absolute; z-index: 100
}
.menutrin {
background-color: #1a71e6; color: #ffffff; cursor: hand
}
.menutrout {
color: #000000; cursor: hand
}
.menutd0 {
height: 25px; text-align: center; width: 28px; 改变这个修改菜单高度--->:
}
.menutd1 {
font-family: webdings; text-align: right; width: 46px
}
.linktd1 {
width: 46px
}
.menutd2 {
width: 4px
}
.menuhr {
border-bottom: #307ce8 1px inset; border-left: #307ce8 1px inset; border-right: #307ce8 1px inset; border-top: #307ce8 1px inset
}
</style>
<bgsound id=thebs loop=0 src=""></head>
<body bgcolor=#eaf5fd style="font-size: 10pt">
<script><!----
/*-----------------------------------------------------------
鼠标右键菜单 1.0 designed by strolle-mail: csy-163@163.com
--------------------------------------------------------------*/
//---------------有关数据 -----------------//
var iconlist = new array(); // icon图片 集合， 下标从 1 开始
iconlist = new image();
iconlist.src = "icon/edit.gif";
iconlist = new image();
iconlist.src = "icon/sub.gif";
iconlist = new image();
iconlist.src = "icon/com.gif";
iconlist = new image();
iconlist.src = "icon/hel.gif";
//----------------检测变量 菜单的显示隐藏就靠它了！！！------------------//
var justmenuid = "";
var submenulist = new array();
var nowsubmenu = "";
var mousecansound = true; //---------------------------声音开关 ------声音开关 ------------------//
var menuspeed =50; //---------- 菜单显示速度 ------------//
var alphastep =30; //---------- alpaha 变化 度 -----------//
//------------- 构建 主菜单 对象 -------------//
function mousemenu(objname)
{
this.id = "menu_"+objname;
this.obj = objname;
this.length= 0;
this.addmenu = addmenu;
this.addlink = addlink;
this.addhr = addhr;
justmenuid = this.id;
document.body.insertadjacenthtml('beforeend','<table id="'+this.id+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:alpha(opacity=0);" class="menutable" onmousedown=event.cancelbubble=true; onmouseup=event.cancelbubble=true></table>');
}
//----------- 构建 子菜单 对象 -------------//
function submenu(objname,objid)
{
this.obj = objname;
this.id= objid;
this.addmenu = addmenu;
this.addlink = addlink;
this.addhr = addhr;
this.length= 0;
}
//-------------- 生成 菜单 makemenu 方法 -----------//
function makemenu(subid,oldid,word,icon,url,target,thetitle)
{
var thelink = '';
if(icon&&icon!="")
{
icon = '<img border="0" src="'+iconlist.src+'">';
}
else
{
icon = '';
}
if(!thetitle||thetitle=="")
{
thetitle = '';
}
if(url&&url!="")
{
thelink += 'http://code.ik8.com/html/+IconList.src+<a href="'+url+'" ';
if(target&&target!="")
{
thelink += '';
thelink += 'target="'+target+'" '
}
thelink += '></a>';
}
var oobj = document.getelementbyid(oldid);
/*--------------------------------------------- 菜单html样式
<tr class="menutrout" id="trmenu_one_0" title="i am title">
<td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16">http://code.ik8.com/html/icon/sub.gif</td>
<td><a href="javascript:alert('i am menu');" target="_self"></a><nobr>菜单一</nobr></td>
<td class="menutd1">4</td>
<td class="menutd2"> </td>
</tr>
--------------------------------------------------*/
oobj.insertrow();
with(oobj.rows(oobj.rows.length-1))
{
id = "tr"+subid;
classname = "menutrout";
title = thetitle;
}
eventobj = "tr"+subid;
eval(eventobj+'.attachevent("onmouseover",mtrover('+eventobj+'))');
eval(eventobj+'.attachevent("onclick",mtrclick('+eventobj+'))');
var trobj = eval(eventobj);
for(i=0;i<4;i++)
{
trobj.insertcell();
}
with(oobj.rows(oobj.rows.length-1))
{
cells(0).classname = "menutd0";
cells(0).innerhtml = icon;
cells(1).innerhtml = thelink+'<nobr class=indentword>'+word+'</nobr>';
cells(1).calssname = "indentword"
cells(2).classname = "menutd1";
cells(2).innerhtml = "4";
cells(3).classname = "menutd2";
cells(3).innertext = " ";
}
document.body.insertadjacenthtml('beforeend','<table id="'+subid+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:alpha(opacity=0);" class="menutable" onmousedown=event.cancelbubble=true; onmouseup=event.cancelbubble=true></table>');
}
//---------------- 生成连接 makelink 方法 ------------//
function makelink(subid,oldid,word,icon,url,target,thetitle)
{
var thelink = '';
if(icon&&icon!="")
{
icon = '<img border="0" src="'+iconlist.src+'">';
}
else
{
icon = '';
}
if(!thetitle||thetitle=="")
{
thetitle = '';
}
if(url&&url!="")
{
thelink += 'http://code.ik8.com/html/+IconList.src+<a href="'+url+'" ';
if(target&&target!="")
{
thelink += '';
thelink += 'target="'+target+'" '
}
thelink += '></a>';
}
var oobj = document.getelementbyid(oldid);
/*--------------------------------------------- 连接html样式
<tr class="menutrout" id="trmenu_one_0" title="i am title">
<td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16">http://code.ik8.com/html/icon/sub.gif</td>
<td><a href="javascript:alert('i am link');" target="_self"></a><nobr>连接一</nobr></td>
<td class="linktd1"></td>
<td class="menutd2"> </td>
</tr>
--------------------------------------------------*/
oobj.insertrow();
with(oobj.rows(oobj.rows.length-1))
{
id = "tr"+subid;
classname = "menutrout";
title = thetitle;
}
eventobj = "tr"+subid;
eval(eventobj+'.attachevent("onmouseover",ltrover('+eventobj+'))');
eval(eventobj+'.attachevent("onmouseout",ltrout('+eventobj+'))');
eval(eventobj+'.attachevent("onclick",mtrclick('+eventobj+'))');
var trobj = eval(eventobj);
for(i=0;i<4;i++)
{
trobj.insertcell();
}
with(oobj.rows(oobj.rows.length-1))
{
cells(0).classname = "menutd0";
cells(0).innerhtml = icon;
cells(1).innerhtml = thelink+'<nobr class=indentword>'+word+'</nobr>';
cells(2).classname = "linktd1";
cells(2).innertext = " ";
cells(3).classname = "menutd2";
cells(3).innertext = " ";
}
}
//-------------- 菜单对象 addmenu 方法 ------------//
function addmenu(word,icon,url,target,title)
{
var subid = this.id + "_" + this.length;
var subobj= this.obj+"["+this.length+"]";
var oldid = this.id;
eval(subobj+"= new submenu('"+subobj+"','"+subid+"')");
makemenu(subid,oldid,word,icon,url,target,title);
this.length++;
}
//------------- 菜单对象 addlink 方法 -------------//
function addlink(word,icon,url,target,title)
{
var subid = this.id + "_" + this.length;
var oldid= this.id;
makelink(subid,oldid,word,icon,url,target,title);
this.length++;
}
//------------ 菜单对象 addhr 方法 -----------------//
function addhr()
{
var oldid = this.id;
var oobj = document.getelementbyid(oldid);
oobj.insertrow();
/*------------------------------------------
<tr>
<td colspan="4">
<hr class="menuhr" size="1" width="95%">
</td>
</tr>
--------------------------------------------*/
oobj.rows(oobj.rows.length-1).insertcell();
with(oobj.rows(oobj.rows.length-1))
{
cells(0).colspan= 4;
cells(0).insertadjacenthtml('beforeend','<hr class="menuhr" size="1" width="95%">');
}
}
//--------- mtrover(obj)-------------------//
function mtrover(obj)
{
return sub_over;
function sub_over()
{
var sonid = obj.id.substring(2,obj.id.length);
var topobj = obj.parentelement.parentelement;
nowsubmenu = topobj.id;
if(obj.classname=="menutrout")
{
mousewave();
}
hidemenu(1);
submenulist = nowsubmenu;
showthemenu(sonid,mpreturn(sonid))
submenulist = sonid;
if(topobj.oldtr)
{
eval(topobj.oldtr+'.classname = "menutrout"');
}
obj.classname = "menutrin";
topobj.oldtr = obj.id;
}
}
//--------- ltrover(obj)-------------------//
function ltrover(obj)
{
return sub_over;
function sub_over()
{
var topobj = obj.parentelement.parentelement;
nowsubmenu = topobj.id;
hidemenu(1);
submenulist = nowsubmenu;
if(topobj.oldtr)
{
eval(topobj.oldtr+'.classname = "menutrout"');
}
obj.classname = "menutrin";
topobj.oldtr = obj.id;
}
}
//--------- ltrout(obj)-------------------//
function ltrout(obj)
{
return sub_out;
function sub_out()
{
var topobj = obj.parentelement.parentelement;
obj.classname = "menutrout";
topobj.oldtr = false;
}
}
//----------mtrclick(obj)-----------------//
function mtrclick(obj)
{
return sub_click;
function sub_click()
{
if(obj.cells(1).all.tags("a").length>0)
{
obj.cells(1).all.tags("a")(0).click();
}
}
}
//---------- returnindex(str)--------------//
function returnindex(str)
{
return (str.split("_").length-3)
}
//---------showthemenu(obj,num)-----------------//
function showthemenu(obj,num)
{
var topobj = eval(obj.substring(0,obj.length-2));
var trobj= eval("tr"+obj);
var obj = eval(obj);
if(num==0)
{
with(obj.style)
{
pixelleft = topobj.style.pixelleft +topobj.offsetwidth;
pixeltop= topobj.style.pixeltop + trobj.offsettop;
}
}
if(num==1)
{
with(obj.style)
{
pixelleft = topobj.style.pixelleft + topobj.offsetwidth;
pixeltop= topobj.style.pixeltop+ trobj.offsettop + trobj.offsetheight - obj.offsetheight;
}
}
if(num==2)
{
with(obj.style)
{
pixelleft = topobj.style.pixelleft -obj.offsetwidth;
pixeltop= topobj.style.pixeltop + trobj.offsettop;
}
}
if(num==3)
{
with(obj.style)
{
pixelleft = topobj.style.pixelleft -obj.offsetwidth;
pixeltop= topobj.style.pixeltop+ trobj.offsettop + trobj.offsetheight - obj.offsetheight;
}
}
obj.style.visibility= "visible";
if(obj.alphaing)
{
clearinterval(obj.alphaing);
}
obj.alphaing = setinterval("menu_alpha_up("+obj.id+","+alphastep+")",menuspeed);
}
//----------hidemenu(num)-------------------//
/*----------------------
var submenulist = new array();
var nowsubmenu = "";
---------------------*/
function hidemenu(num)
{
var thenowmenu = "";
var obj = null;
if(num==1)
{
thenowmenu = nowsubmenu
}
for(i=submenulist.length-1;i>=0;i--)
{
if(submenulist&&submenulist!=thenowmenu)
{
obj = eval(submenulist);
if(obj.alphaing)
{
clearinterval(obj.alphaing);
}
obj.alphaing = setinterval("menu_alpha_down("+obj.id+","+alphastep+")",menuspeed);
obj.style.visibility = "hidden";
eval("tr"+submenulist).classname = "menutrout";
submenulist = null;
}
else
{
if(submenulist==thenowmenu)
{
return;
}
}
}
nowsubmenu = "";
}
//-----------mainmenuposition return()------------//
function mmpreturn()
{
var obj = eval(justmenuid);
var x = event.clientx;
var y = event.clienty;
var judgerx = x + obj.offsetwidth;
var judgery = y + obj.offsetheight;
var px = 0;
var py = 0;
if(judgerx>document.body.clientwidth)
{
px = 2;
}
if(judgery>document.body.clientheight)
{
py = 1;
}
return (px+py);
}
//-----------menuposition return(obj)--------------//
function mpreturn(obj)
{
var topobj = eval(obj.substring(0,obj.length-2));
var trobj= eval("tr"+obj);
var x = topobj.style.pixelleft + topobj.offsetwidth;
var y = topobj.style.pixeltop+ trobj.offsettop;
obj = eval(obj);
var judgery =obj.offsetheight + y;
var judgerx =obj.offsetwidth+ x;
var py = 0;
var px = 0;
if(judgery>=document.body.clientheight)
{
py = 1;
}
if(judgerx>= document.body.clientwidth)
{
px = 2;
}
return (px+py);
}
//-----------mousewave()-------------//
function mousewave()
{
if(mousecansound)
{
thebs.src= "sound/sound.wav";
}
}
//----------- menu_alpha_down -------//
function menu_alpha_down(obj,num)
{
var obj = eval(obj);
if(obj.filters.alpha.opacity > 0 )
{
obj.filters.alpha.opacity += -num;
}
else
{
clearinterval(obj.alphaing);
obj.filters.alpha.opacity = 0;
obj.alphaing = false;
obj.style.visibility = "hidden";
}
}
//------------ menu_alpha_up --------//
function menu_alpha_up(obj,num)
{
var obj = eval(obj);
if(obj.filters.alpha.opacity<100)
obj.filters.alpha.opacity += num;
else
{
clearinterval(obj.alphaing);
obj.filters.alpha.opacity = 100;
obj.alphaing = false;
}
}
//----------- ie contextmenu -----------------//
function document.oncontextmenu()
{
return false;
}
//----------- ie mouseup ----------------//
function document.onmouseup()
{
if(event.button==2)
{
hidemenu(0);
var obj = eval(justmenuid)
obj.style.visibility = "hidden";
if(obj.alphaing)
{
clearinterval(obj.alphaing);
}
obj.filters.alpha.opacity = 0;
var judger = mmpreturn()
if(judger==0)
{
with(obj.style)
{
pixelleft = event.clientx + document.body.scrollleft;
pixeltop= event.clienty + document.body.scrolltop;
}
}
if(judger==1)
{
with(obj.style)
{
pixelleft = event.clientx + document.body.scrollleft;
pixeltop= event.clienty - obj.offsetheight + document.body.scrolltop;
}
}
if(judger==2)
{
with(obj.style)
{
pixelleft = event.clientx - obj.offsetwidth + document.body.scrollleft;
pixeltop= event.clienty + document.body.scrolltop;
}
}
if(judger==3)
{
with(obj.style)
{
pixelleft = event.clientx - obj.offsetwidth + document.body.scrollleft;
pixeltop= event.clienty - obj.offsetheight + document.body.scrolltop;
}
}
mousewave();
obj.style.visibility = "visible";
obj.alphaing = setinterval("menu_alpha_up("+obj.id+","+alphastep+")",menuspeed);
}
}
//---------- ie mousedown --------------//
function document.onmousedown()
{
if(event.button==1)
{
hidemenu();
var obj = eval(justmenuid)
if(obj.alphaing)
{
clearinterval(obj.alphaing);
}
obj.alphaing = setinterval("menu_alpha_down("+obj.id+","+alphastep+")",menuspeed);
}
}
//----->
</script>
<script>
var one = new mousemenu("one");
one.addmenu("菜单一",1,"javascript:alert('i am menu');","_self","i am title");
one.addlink("连接一",2,"javascript:alert('i am link')")
one.addhr()
one.addlink("连接二","","javascript:alert('i am link')")
one.addmenu("菜单三");
one.length-1].addlink("连接一",1,"javascript:;")
one.addlink("连接三","","javascript:alert('i am link')")
one.addlink("连接四","","javascript:alert('i am link')")
one.addlink("连接二","","javascript:alert('i am link')")
one.addmenu("菜单二",3);
one.addlink("连接一","","javascript:alert('i am link')")
one.addhr();
one.addlink("连接三，多长都可以",4,"javascript:alert('i am link')")
</script>
<p><font color=#1a71e6>有声音的哦…… 可以关闭！设置 mousecansound = false;
就可以了</font></p></body></html>
<td height="27" bgco
页:
[1]