CSS3之重新定义鼠标右键
效果图:
html:
<div id="rightkey">
<ul>
<li><img src="data:images/xmgl.png" alt="" /><div>项目管理</div></li>
<li><img src="data:images/bbzx.png" alt="" /><div>我的项目</div></li>
<li class="line"></li>
<li><img src="data:images/jqgl.png" alt="" /><div>我的项目</div></li>
<li><img src="data:images/scgl.png" alt="" /><div>我的项目</div></li>
<li><img src="data:images/jqgl.png" alt="" /><div>我的项目</div></li>
<li><img src="data:images/scgl.png" alt="" /><div>我的项目</div></li>
</ul>
</div>
css:
html,body{margin: 0;padding: 0;background-color: #eee;}
#rightkey{position: fixed;display: none;width: 200px;height: 230px;z-index: 1000;padding: 10px 0;margin: 2px 0 0;list-style: none;font-size: 14px;text-align: left;background-color: #fff;border: 1px solid transparent;border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);-o-box-shadow: 0 6px 12px rgba(0,0,0,.175);-ms-box-shadow:0 6px 12px rgba(0,0,0,.175);background-clip: padding-box;}
#rightkey ul{margin: 0;padding: 0;list-style-type: none;overflow: hidden;}
#rightkey li{width: 100%;height: 20px;cursor: pointer;line-height: 20px;padding: 8px 15px;font-size: 16px;overflow: hidden;}
#rightkey li:hover{background-color: rgb(245,245,245);}
#rightkey img{width: 20px;height: 20px;border-radius: 10px;display: block;float: left;margin-right: 10px;background-color: red;}
#rightkey div{width: 150px;height: 16px;float: left;}
#rightkey .line{padding: 0;margin: 5px 0;width: 100%;height: 1px;background-color: #ddd;}
js:
document.oncontextmenu=function(){return false;};
var initx=0,inity=0;
var rightkey=$("#rightkey");
$(document).mousedown(function(e){
var rightwidth=rightkey.width()+10;
var rightheight=rightkey.height()+45;
var x=e.screenX+10;
var y=e.screenY-50;
if(3 == e.which){
initx=x;
inity=y;
rightkey.css({"top":y,"left":x,"display":"block"});
}else if(1 == e.which){
var dx=x-initx;
var dy=y-inity;
if(!(dx <= rightwidth && dx >=0 && dy>=0 && dy <= rightheight)){
rightkey.css("display","none");
}
}
}); rightkey.find("li").click(function(){
alert($(this).html());
rightkey.css("display","none");
})
CSS3之重新定义鼠标右键的更多相关文章
- jquery鼠标右键事件
$('body').live("mousedown",function(e){ $('body').bind("contextmenu",function(e) ...
- 利用jquery实现网页禁止鼠标右键、禁止复制
很多时候,网站的内容辛苦写法被轻松复制,为了不让自己的劳动成果外流,可以利用禁止鼠标右键等方式保护自己的原创内容! 方式1:禁止鼠标右键操作 <script src="http://l ...
- 30款css3实现的鼠标经过图片显示描述特效
今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...
- 基于CSS3制作的鼠标悬停动画菜单
之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...
- 解决vim中鼠标右键无法复制的问题
转:http://www.cnblogs.com/jianyungsun/archive/2011/03/19/1988855.html 这是我的vim配置文件:jeffy-vim-v2.4.tar ...
- jQuery自定义Web页面鼠标右键菜单
jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...
- js实现自己定义鼠标右键-------Day45
又是周末了,只是事实上这在国外应该算是一周的開始吧,无论怎么说,今天是在歇息,放松我紧绷的神经,放松我有些疲惫的精神,昨晚上要裂了般的头疼,仿佛全部的数据都在脑子字面飞舞旋转,伴着一阵阵的恶心,当时把 ...
- Qt creator 创建鼠标右键菜单 (不新建类)
界面 步骤 打开你的界面文件并选中你要添加右键的控件,选择“CustomContextMenu” 右键选择“转到槽...” -> customContextMenuRequested 插入下面代 ...
- 如何在C#添加鼠标右键菜单
C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...
随机推荐
- EL字符串表达式和常用功能用途拦截
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> ${wj ...
- sizeof运营商
sizeof它是C语言的关键字,它计算对象所占用的字节数.采用sizeof通过计算对象的大小,占用的对象是一个良好的编程习惯二手. ★你得到的内置型尺寸 一些内置类型的大小会随着体系结构的不同而不同, ...
- iOS pragma mark要使用
郝萌主倾心贡献,尊重作者的劳动成果.请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠.支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 简单的来说 ...
- Oracle 初始化参数文件pfile和spfile
pfile和spfile差额 pfile :Oracle 9i之前.ORACLE使用我们一直PFILE存储的初始化参数,,能够在操作系统级别改动. 当spfile文件改动出现错误导致oracle无法启 ...
- MVC下判断用户登录和授权状态方法
MVC下判断用户登录和授权状态方法 在我们日常开发的绝大多数系统中,都涉及到管理用户的登录和授权问题.登录功能(Authentication),针对于所有用户都开放:而授权(Authorization ...
- SQLSERVER手动增长日志文件和数据文件
原文:SQLSERVER手动增长日志文件和数据文件 SQLSERVER手动增长日志文件和数据文件 手动增长日志文件,实际上就是修改日志文件的大小 size 的单位是MB 下面设置日志文件大小是204 ...
- VS怎样创建和使用lib文件
假设你当前正在使用vs写了一个project,那么你想如今就生成一个Lib文件,那么能够直接在"项目属性"上进行改动i 项目属性->配置属性->常规->配置类型中 ...
- 设计Kafka的High Level Consumer
原文:https://cwiki.apache.org/confluence/display/KAFKA/Consumer+Group+Example 为什么使用High Level Consumer ...
- C#枚举数和迭代器
大道至简,始终认为简洁是一门优秀的编程语言的一个必要条件.相对来说,C#是比较简洁的,也越来越简洁.在C#中,一个关键字或者语法糖在编译器层面为我们做了很多乏味的工作,可能实现的是一个设计模式,甚至是 ...
- 深入理解Android中ViewGroup
文章目录 [隐藏] 一.ViewGroup是什么? 二.ViewGroup这个容器 2.1 添加View的算法 2.1.1 我们先来分析addViewInner方法: 2.1.2 addInArr ...