学习论坛 会员投稿 RSS订阅 站内通告:
搜索: 您的位置网站源代码 > 网页特效 > 导航特效 > 点击鼠标左键弹出菜单特效实例

点击鼠标左键弹出菜单特效实例

2009-10-21 09:25:50 来源:原创 【 】 浏览:
摘要: 点击鼠标左键弹出菜单特效实例说明:当我们在浏览器内的任意位置,单击鼠标的左键,都可以弹出我们预设好的菜单,这样可以使我们快速的进行其他的操作,一般来说,我们比较常

点击鼠标左键弹出菜单特效实例说明:当我们在浏览器内的任意位置,单击鼠标的左键,都可以弹出我们预设好的菜单,这样可以使我们快速的进行其他的操作,一般来说,我们比较常用的方式是右键方式。
实例操作步骤:
<!--将以下代码加入HTML的<Body></Body>之间-->
<script language="JavaScript"> 
document.onclick = popUp  
function popUp() {
newX = window.event.x + document.body.scrollLeft
newY = window.event.y + document.body.scrollTop
menu = document.all.itemopen
  if ( menu.style.display == ""){
    menu.style.display = "none" }
  else {
     menu.style.display = ""}  
    menu.style.pixelLeft = newX - 50
    menu.style.pixelTop = newY - 50
}
</script>
<script language="JavaScript">
document.onclick = popUp 
function popUp() {
newX = window.event.x + document.body.scrollLeft
newY = window.event.y + document.body.scrollTop
menu = document.all.itemopen
  if ( menu.style.display == ""){
    menu.style.display = "none" }
  else {
     menu.style.display = ""}

    menu.style.pixelLeft = newX - 50
    menu.style.pixelTop = newY - 50
}
</script>
<style type="text/css">
body {  font: 9pt "宋体"; margintop: 0px ; color: #FFFFFF; background: #FFFFFF}
a.           { font: 9pt "宋体"; cursor: hand; font-size: 9pt ; color: #ffffff; text-decoration: none }
a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
a.cc:hover   { font: 9pt "宋体"; cursor: hand; color: #FF0033}
.box         { font: 9pt "宋体"; position: absolute;  background: #000000 }
</style>
<table id="itemopen" class='box'  style='display:none'>
<tr><td><a href="http://www.isstudy.com/wlbc" class="cc" >网络编程</a></td></tr>
<tr><td><a href="http://www.isstudy.com/wyzz" class="cc" >网页制作</a></td></tr>
<tr><td><a href="http://www.isstudy.com/clbd" class="cc" >冲浪宝典</a></td></tr>
<tr><td><a href="http://www.isstudy.com/czxt" class="cc" >操作系统</a></td></tr>
</table>

运行该特效后的效果


顶一下
(0)
0%
踩一下
(0)
0%
Tags: 网页特效 导航特效
责任编辑:小人物
收藏】 【挑错】 【推荐】 【打印
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
关于我们 | 网站声明 | 广告服务 | 招聘英才 | 联系我们 | 网站地图 | RSS订阅 |