鼠标右键

最新推荐文章于 2023-07-05 11:23:34 发布

love-study-lele

最新推荐文章于 2023-07-05 11:23:34 发布

阅读量120

点赞数

分类专栏： jq 文章标签：鼠标右键菜单栏

本文链接：https://blog.csdn.net/qq_40639990/article/details/78285981

版权

jq 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>index</title>
    <style>
    	*{
    		margin:0px;
    		padding:0px;
            font-family: 微软雅黑;
    	}

    	ul{
    		width:270px;
    		height:235px;
    		border:1px solid #ccc;
    		padding:2px 5px;
    		position: absolute;
    		display: none;
    	}

    	ul li{
    		
    		list-style: none;
    		font-weight: bold;
    		line-height: 25px;
    	}
        ul li:hover{
            background: #ccc;
        }
        span{margin-left: 100px;}
    </style>
    <script src="../jquery.min.js"></script>
</head>
<body>
	<ul>
		<li>返回(B)<span>Alt+向左箭头</span></li>
		<li>前进(F)<span>Alt+向右箭头</span></li>
		<li>重新加载(R)<span>Ctrl+R</span></li>
        <hr />
		<li>另存为(A)...<span>Ctrl+S</span></li>
		<li>打印为(P)...<span>Ctrl+P</span></li>
        <li>投射(C)</li>
        <hr />
        <li>翻成中文</li>
        <li>查看网页源代码<span>Ctrl+U</span></li>
        <li>检查(N)<span>Ctrl+Shift+I</span></li>
	</ul>
</body>
<script>
$(document).contextmenu(function(event){
	x=event.clientX;
    y=event.clientY;

	btn=event.button;//获取右键；

	if(btn==2){
		$('ul').show().css({'left':x+'px','top':y+'px'})
       return false;//阻止谷歌出现
	}
});
$('ul li:eq(0)').css('color','#ccc');
$('ul li:eq(1)').css('color','#ccc');

</script>
</html>

love-study-lele

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标右键

index *{ margin:0px; padding:0px; font-family: 微软雅黑; } ul{ width:270px; height:235px; border:1px solid #ccc; padding:2px 5px;
复制链接

扫一扫