自定义右键菜单

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
 

   但在某些场合下,我们并不希望菜单中出现这些功能,而期待着展示一个开发者希望的菜单选项,比如,当点击鼠标右键后,出现如下画面:

  

   这将会更加贴近那个页面实际要表达的环境。是不是很美妙!如何产生这样的效果?请往下看。

   实现思路

   1、首先,定义一个层ie5menu,它就是实际的菜单范围框。然后,再在这个层中,定义表示自定义菜单项目的各个分层内容,层的名字叫做menuitems。初始页面时,将层ie5ment设置为不可见。

   2、接着,定义层ie5menu的相关事件,从而扑捉鼠标经过、离开以及点击的动作,这些事件是:onMouseover、onMouseout和onClick。鼠标经过时,高亮度菜单条项目;离开时,恢复正常显示;点击时,跳转到相应的链接位置。

   3、为了接替鼠标右键点击后浏览器程序自身的动作处理,就需要设置相应的事件为我们自定义的事件过程。在浏览器Internet Explorer中,可以使用oncontextmenu事件扑捉鼠标右键按下的发生。

   4、出现自定义菜单后,如何使它再次消失呢?有许多种方法可以解决,这里,我们定义当点击鼠标左键时,菜单消失,也就是说,重定向浏览器的onclick事件的处理过程。

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭