|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
|
< style > vWhLinux联盟
< !-- vWhLinux联盟
/*定义菜单方框的样式1*/ vWhLinux联盟
.skin0 { vWhLinux联盟
position:absolute; vWhLinux联盟
text-align:left; vWhLinux联盟
width:200px; /*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/ vWhLinux联盟
border:2px solid black; vWhLinux联盟
background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/ vWhLinux联盟
font-family:Verdana; vWhLinux联盟
line-height:20px; vWhLinux联盟
cursor:default; vWhLinux联盟
visibility:hidden; /*初始时，设置为不可见*/ vWhLinux联盟
} vWhLinux联盟
/*定义菜单方框的样式2*/ vWhLinux联盟
.skin1 { vWhLinux联盟
cursor:default; vWhLinux联盟
font:menutext; vWhLinux联盟
position:absolute; vWhLinux联盟
text-align:left; vWhLinux联盟
font-family: Arial, Helvetica, sans-serif; vWhLinux联盟
font-size: 10pt; vWhLinux联盟
width:200px; /*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/ vWhLinux联盟
background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/ vWhLinux联盟
border:1 solid buttonface; vWhLinux联盟
visibility:hidden; /*初始时，设置为不可见*/ vWhLinux联盟
border:2 outset buttonhighlight; vWhLinux联盟
} vWhLinux联盟
vWhLinux联盟
/*定义菜单条的显示样式*/ vWhLinux联盟
.menuitems { vWhLinux联盟
padding-left:15px; /*左间距*/ vWhLinux联盟
padding-right:10px; /*右间距*/ vWhLinux联盟
} vWhLinux联盟
-- > vWhLinux联盟
< /style > vWhLinux联盟
vWhLinux联盟
< SCRIPT LANGUAGE="JavaScript1.2" > vWhLinux联盟
vWhLinux联盟
< !-- vWhLinux联盟
//定义菜单显示的外观，可以从上面定义的2种格式中选择其一 vWhLinux联盟
var menuskin = "skin1"; vWhLinux联盟
//是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串 vWhLinux联盟
var display_url = 0; vWhLinux联盟
vWhLinux联盟
<b>function showmenuie5() {</b> vWhLinux联盟
//显示菜单 vWhLinux联盟
vWhLinux联盟
//获取当前鼠标右键按下后的位置，据此定义菜单显示的位置 vWhLinux联盟
var rightedge = document.body.clientWidth-event.clientX; vWhLinux联盟
var bottomedge = document.body.clientHeight-event.clientY; vWhLinux联盟
vWhLinux联盟
//如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）vWhLinux联盟
为当前鼠标位置向左一个菜单宽度 vWhLinux联盟
if (rightedge < ie5menu.offsetWidth) vWhLinux联盟
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth; vWhLinux联盟
else vWhLinux联盟
//否则，就定位菜单的左坐标为当前鼠标位置 vWhLinux联盟
ie5menu.style.left = document.body.scrollLeft + event.clientX; vWhLinux联盟
vWhLinux联盟
//如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）vWhLinux联盟
为当前鼠标位置向上一个菜单高度 vWhLinux联盟
if (bottomedge < ie5menu.offsetHeight) vWhLinux联盟
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight; vWhLinux联盟
else vWhLinux联盟
//否则，就定位菜单的上坐标为当前鼠标位置 vWhLinux联盟
ie5menu.style.top = document.body.scrollTop + event.clientY; vWhLinux联盟
vWhLinux联盟
//设置菜单可见 vWhLinux联盟
ie5menu.style.visibility = "visible"; vWhLinux联盟
return false; vWhLinux联盟
}</pre> vWhLinux联盟
<p><pre > vWhLinux联盟
<b>function hidemenuie5() </b>{ vWhLinux联盟
//隐藏菜单 vWhLinux联盟
//很简单，设置visibility为hidden就OK！ vWhLinux联盟
ie5menu.style.visibility = "hidden"; vWhLinux联盟
} vWhLinux联盟
<b>function highlightie5() </b>{ vWhLinux联盟
//高亮度鼠标经过的菜单条项目 vWhLinux联盟
//如果鼠标经过的对象是menuitems，就重新设置背景色与前景色 vWhLinux联盟
//event.srcElement.className表示事件来自对象的名称，必须首先判断这个值，这很重要！ vWhLinux联盟
if (event.srcElement.className == "menuitems") { vWhLinux联盟
event.srcElement.style.backgroundColor = "highlight"; vWhLinux联盟
event.srcElement.style.color = "white"; vWhLinux联盟
//将链接信息显示到状态行 vWhLinux联盟
//event.srcElement.url表示事件来自对象表示的链接URL vWhLinux联盟
if (display_url) vWhLinux联盟
window.status = event.srcElement.url; vWhLinux联盟
} vWhLinux联盟
} vWhLinux联盟
<b>function lowlightie5() </b>{ vWhLinux联盟
//恢复菜单条项目的正常显示 vWhLinux联盟
if (event.srcElement.className == "menuitems") { vWhLinux联盟
event.srcElement.style.backgroundColor = ""; vWhLinux联盟
event.srcElement.style.color = "black"; vWhLinux联盟
window.status = ""; vWhLinux联盟
} vWhLinux联盟
} vWhLinux联盟
vWhLinux联盟
<b>function jumptoie5() </b>{ vWhLinux联盟
//转到新的链接位置 vWhLinux联盟
if (event.srcElement.className == "menuitems") { vWhLinux联盟
//如果存在打开链接的目标窗口，就在那个窗口中打开链接 vWhLinux联盟
if (event.srcElement.getAttribute("target") != null) vWhLinux联盟
window.open(event.srcElement.url, event.srcElement.getAttribute("target")); vWhLinux联盟
else vWhLinux联盟
//否则，在当前窗口打开链接 vWhLinux联盟
window.location = event.srcElement.url; vWhLinux联盟
} vWhLinux联盟
} vWhLinux联盟
// End -- > vWhLinux联盟
< /script > vWhLinux联盟
< /HEAD > vWhLinux联盟
< BODY > vWhLinux联盟
< center >< h3 >在空白处点击鼠标右键，猜猜会看到什么 ？< /h3 >< /center >< br >< br > vWhLinux联盟
//定义菜单方框层ie5ment，并定义其显示样式以及相关的3个监测事件 vWhLinux联盟
< div id="ie5menu" class="skin0" onMouseover="highlightie5()" vWhLinux联盟
onMouseout="lowlightie5()" onClick="jumptoie5();" > vWhLinux联盟
vWhLinux联盟
//定义其中的菜单条项目 vWhLinux联盟
//根据你的需要，在这里添加其他的菜单条名称以及相应的链接URL vWhLinux联盟
< div class="menuitems" url="javascript:history.back();" >后退< /div > vWhLinux联盟
< div class="menuitems" url="javascript:history.forward();" >前进< /div > vWhLinux联盟
< hr > vWhLinux联盟
< div class="menuitems" url="http://www.chinabyte.com/builder/" >ChinaByte网络学院< /div > vWhLinux联盟
< div class="menuitems" url="http://www.chinabyte.com/column/" >ChinaByte专栏天地< /div > vWhLinux联盟
< /div > vWhLinux联盟
//页面加载后，首先执行的初始化脚本程序 vWhLinux联盟
< script language="JavaScript1.2" > vWhLinux联盟
//如果当前浏览器是Internet Explorer，document.all就返回真 vWhLinux联盟
if (document.all && window.print) { vWhLinux联盟
vWhLinux联盟
//选择菜单方块的显示样式 vWhLinux联盟
ie5menu.className = menuskin; vWhLinux联盟
vWhLinux联盟
//重定向鼠标右键事件的处理过程为自定义程序showmenuie5 vWhLinux联盟
document.oncontextmenu = showmenuie5; vWhLinux联盟
vWhLinux联盟
//重定向鼠标左键事件的处理过程为自定义程序hidemenuie5 vWhLinux联盟
document.body.onclick = hidemenuie5; vWhLinux联盟
} vWhLinux联盟
< /script > vWhLinux联盟
< /body>< /html> vWhLinux联盟
</pre> vWhLinux联盟
<P> <b>演示效果</b></p> vWhLinux联盟
<P> OK！看了上面代码的详细解读，你是否领会了其中的技巧？软件真是无所不能，是吗？</p> vWhLinux联盟
<P> 想要看看到底是怎样的神奇效果吗？不要犹豫，请点击<a href="http://www.chinabyte.com/builder/download/gdemo.htm" target="_blank">这里</a>！</p>
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
