CSS+&#106avascript打造超酷右键菜单

css|菜单

  但有时候我们会遇到这样的问题,我们希望禁止访问者使用右键菜单或者希望屏蔽右键菜单的某些功能,比如,为了保护网页内容我们不希望访问者通过右键菜单来查看网页源代码,也不希望其通过右键来对网页内容进行选取、复制等,很多网页设计者在考虑这个问题的时候都是简单地对右键进行屏蔽,与其这样我们还不如用脚本来实现一个风格右键菜单,并在这个右键菜单中装上我们自己的内容。下面我们来尝试一下这个设想。

  我们首先要考虑的问题是通过鼠标右键单击事件来调用一个函数,这个函数用来显示新的右键菜单的内容。我们知道鼠标的右键单击事件是通过document.oncontextmenu来调用的,如果我们自行定义document.oncontextmenu=某个函数,这样就可以实现新右键菜单的调用了,关键问题是如何通过这个函数来控制菜单的显示,同时,还要通过窗体的单击事件document.body.onclick(一般指左键单击)来隐藏菜单,这样一个过程就完成了鼠标右键菜单的弹出和隐藏。

  首先来看看这段脚本代码:

/*初始化*/
<script language="javascript1.2">
/*如果当前浏览器是Internet Explorer,document.all就返回真*/
if (document.all && window.print) {

/*选择菜单方块的显示样式*/
ie5menu.className = menuskin;

/*重定向鼠标右键事件的处理过程为自定义程序showmenuie5*/
document.oncontextmenu = showmenuie5;

/*重定向鼠标左键事件的处理过程为自定义程序hidemenuie5*/
document.body.onclick = hidemenuie5;
}
</script>

  一般情况下页面装载完毕后才发生鼠标右键事件,所以为了不影响页面的装载速度我们可以把这段代码放在页面的最后面。这段代码很简单,首先检验是不是IE浏览器,如果是那么下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数showmenuie5,当用户产生左键事件时就调用函数hidemenuie5。

  解决了上面这个问题,现在我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。当然,这里的菜单并不是真正意义的右键菜单,而是我们自己做的一个div,在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐,这就达到了使用鼠标右键一样的效果了。

时间: 2024-08-04 07:35:44

CSS+&#106avascript打造超酷右键菜单的相关文章

CSS+JavaScript打造超酷右键菜单

css|javascript|菜单|右键 其实在网页上实现右键菜单的风格化已经是一个老话题了,正常情况下,网页上的右键菜单是默认IE右键选项,包括了一些常用的功能. 但有时候我们会遇到这样的问题,我们希望禁止访问者使用右键菜单或者希望屏蔽右键菜单的某些功能,比如,为了保护网页内容我们不希望访问者通过右键菜单来查看网页源代码,也不希望其通过右键来对网页内容进行选取.复制等,很多网页设计者在考虑这个问题的时候都是简单地对右键进行屏蔽,与其这样我们还不如用脚本来实现一个风格右键菜单,并在这个右键菜单中

CSS+JavaScript打造超酷右键菜单(2)

css|javascript|菜单|右键 在一般的网页中,IE浏览器的默认右键菜单是一成不变的固定模式,大部分网友浏览网页时对它的利用率不高.对专业的网页设计师来说,如果能将右键菜单设计成个性化的内容,样式该是多么的酷和方便. 试想一下,用户在你的网站上一点右键,就是你精心组织的"链接"."发信",甚至包含了缤纷的交互式Flash动画!看看如何制作吧: <style> <!-- .skin0 { position:absolute; text-al

VB打造超酷个性化菜单(一)

菜单 VB打造超酷个性化菜单(一) 众所周知,MS Office 2003推出已经有一段时间了,但我们依然不会忘记Office XP刚刚推出时其令人耳目一新的菜单给我们留下的深刻印象.突起的悬浮式图标,不同寻常的菜单项填充方式,不仅让办公一族们赞不绝口,更让广大的程序员和编程爱好者对这种风格的菜单的制作产生了浓厚的兴趣.所以,在这篇文章里,我们就来好好地研究研究用VB怎么制作这种风格的菜单,在文章的最后,我将给出源代码的下载地址.事实上,在了解其原理以后,不论是用VB.VC还是Delphi,都能

VB打造超酷个性化菜单(三)

菜单 VB打造超酷个性化菜单(三) 现在到了最关键,最精彩,也是最复杂的部分了.我们最关心的就是怎样"画"菜单,怎样处理菜单事件,在MenuWndProc这个处理消息的函数里,我们要处理如下消息:WM_COMMAND(单击菜单项),WM_MEASUREITEM(处理菜单高度和宽度),WM_MENUSELECT(选择菜单项),WM_DRAWITEM(绘制菜单项). 打开上次建好的工程,添加一个标准模块,并将其名称设置为mMenu,代码如下: '**********************

VB打造超酷个性化菜单(二)

菜单 VB打造超酷个性化菜单(二) 其实,漂亮的界面都是"画"出来的,菜单当然也不例外.既然是"画"出来的,就需要有窗体来接收"画"菜单这个消息,后面我们会看到,实际上不仅仅是"画"这个消息,一切关于这个菜单的消息都要有一个窗体来接收.如果你对消息不太了解,可以看看网上其它一些关于Windows消息机制的文章.不了解也没有关系,只要会使用就可以了,后面的文章给出了完整的源代码,而且文章的最后还给出了源代码的下载地址. 下面我们

ps打造超酷的激光剑效果

  在电影<星球大战>中最为突出的就是"激光剑",在后续的中国各类武侠片中也经常出现类似于激光剑的特效,本例利用简单的PS视觉特技来完成类似于激光剑的效果,主要涉及到滤镜中的高斯模糊应用,有兴趣的朋友可以一试! 方法/步骤 1.本教程采用photoshop CS5制作,其它版本基本通用,先在PS中打开原图,如下图所示: 2.新建一个透明图层1,如下图所示: 3.单击选择常用工具栏中的"矩形选框工具",如下图所示: 4.在文档中拉出一个竖直的矩形选区,效果

PS打造超酷的立体字

Photoshop打造超酷的立体字,图文教程. 本教程的立体字跟其它立体字的制作大体相同,只是立体字的立体面相对来说比较高,而且立体字的角度比较特别,透视效果更强一点.制作的时候需要根据各个字母的受光面做出不同颜色层次的渐变和填充色. 最终效果 1.新建一个800 * 600 像素的文件,背景填充黑色,选择文字工具打上白色文字,效果如图1. 图1 2.简单的做几条透视参考线,可以凭自己的感觉绘制. 图2 3.把文字栅格化图层,按Ctrl + T 变形,按住Ctrl 键调整文字的几个边角适当的贴近

PS打造超酷的颓废风鲜花人像海报

  PS打造超酷的颓废风鲜花人像海报.教程所用素材并不多,不过整体刻画的非常细,包括背景.人像,装饰等.素材加进后,再用画笔及蒙版等做出初步的颓废效果,然后用滤镜及调色工具增强效果即可     

PS打造超酷的3D突出效果

  PS将普通照片打造超酷的3D突出效果 记得PS之前的图标就是这样的,一直想着是怎么做出来的. 这个界面大家并不陌生,我们在打开PS前都会看到这个启动界面,我注意到右上角和左下角的辐射状条条,一直在琢磨怎么实现出来. 今天我就把教程写出来,供大家学习,创造出更牛逼的图案来. 方法其实非常简单,只要用到PS里的一个自带工具就可轻松搞定,先来看几组我的作品: 怎么样,是不是都成了放射的条形柱了,效果很震撼吧,不仅花朵可以,动物也可以变: 这样的炫酷图案到底是怎么做出来的呢? 铛铛铛... ....