为网页添加右键菜单项
效果截图
下面总结一下实现过程中遇到的坑点
延时函数
js不像其他语言那样有专门的延时函数 “sleep(millions)”
所以在做动画效果时，让CPU放慢处理频率从而显示流畅的动画效果就没那么方便。
在实现右键菜单的动画效果时，我用JS特有的setTimeout方法递归实现了 sleep的效果
获取鼠标位置
|
|
这个方法考虑到了页面过长时的滚动，在IE和谷歌浏览器上测试无误
完整实现代码
直接引入这个js文件就可以实现 原浏览器右键功能封禁并增加新菜单的功能
右键菜单
下面总结一下实现过程中遇到的坑点
1
2
3
4
5
6
7
8
9
10
function loop_a(name,x,y){
//满足条件进行移动操作
if(x>=sx-60){m(name,x,y);setTimeout(function()
{loop_a(name,x-1,y-1);}
,1) //间隔1ms
}
else{
//递归结束
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
$(document).ready(function(){
var c1="<div onclick='c1_c()' id='c1' style='display:none;width:100px;height:100px;border-radius:50px;border:solid rgb(100,100,100) 1px;position:absolute;background-image:url(a.jpg)'></div>";
var c2="<div onclick='c2_c()' id='c2' style='display:none;width:100px;height:100px;border-radius:50px;border:solid rgb(100,100,100) 1px;position:absolute;background-image:url(b.jpg)'></div>";
var c3="<div onclick='c3_c()' id='c3' style='display:none;width:100px;height:100px;border-radius:50px;border:solid rgb(100,100,100) 1px;position:absolute;background-image:url(c.jpg)'></div>";
var c4="<div onclick='c4_c()' id='c4' style='display:none;width:100px;height:100px;border-radius:50px;border:solid rgb(100,100,100) 1px;position:absolute;background-image:url(d.jpg)'></div>";
var c5="<div onclick='c5_c()' id='c5' style='display:none;width:60px;height:60px;border-radius:50px; position:absolute;background-image:url(cha.png)'></div>";
var sx=0;
var sy=0;
$(document.body).append(c1);
$(document.body).append(c2);
$(document.body).append(c3);
$(document.body).append(c4);
$(document.body).append(c5);
});
document.oncontextmenu = function() {
return false;
}
$(document).mousedown(function(e){
if(e.which==3){
//圆心
$("#c5").css("display","none");
var x=e.clientX;
var y=e.clientY;
var cx=x-50;
var cy=y-50;
$("#c5").css("left",cx+20);
$("#c5").css("top",cy+20);
sx=cx;sy=cy;
loop_a("c1",cx,cy);
loop_b("c2",cx,cy);
loop_c("c3",cx,cy);
loop_d("c4",cx,cy);
}
});
function c1_c(){
window.location.href='http://www.baidu.com';
}
function c2_c(){
window.location.href='http://www.baidu.com';
}
function c3_c(){
window.location.href='http://www.baidu.com';
}
function c4_c(){
window.location.href='http://www.baidu.com';
}
function c5_c(){
$("#c1").css("display","none");
$("#c2").css("display","none");
$("#c3").css("display","none");
$("#c4").css("display","none");
$("#c5").css("display","none");
}
function m(name,offsetx,offsety){
$("#"+name+"").css("left",offsetx);
$("#"+name+"").css("top",offsety);
$("#"+name+"").css("display","");
}
function loop_a(name,x,y){
if(x>=sx-60){m(name,x,y);setTimeout(function()
{loop_a(name,x-1,y-1);}
,1)
}
else{
}
}
function loop_b(name,x,y){
if(x<=sx+60){m(name,x,y);setTimeout(function()
{loop_b(name,x+1,y-1);}
,1)
}
else{
$("#c5").css("display","");
}
}
function loop_c(name,x,y){
if(x>=sx-60){m(name,x,y);setTimeout(function()
{loop_c(name,x-1,y+1);}
,1)
}
else{
}
}
function loop_d(name,x,y){
if(x<=sx+60){m(name,x,y);setTimeout(function()
{loop_d(name,x+1,y+1);}
,1)
}
else{
}
}
本文标题:右键菜单
文章作者:zhaochong
发布时间:2017年07月14日 - 13时09分
最后更新:2018年12月03日 - 10时14分
原始链接:https://zzchong23.coding.me/2017/07/14/博客搭建/右键菜单/
许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。