柚子快报激活码778899分享:博客园博文添加自定义右键菜单
[1]页面设计
[2]菜单逻辑
[3]功能实现
[4]完整源码
前面的话
本文是DOM鼠标事件的一个实际应用。查看博客园的博客文章时,有的文章非常长,却没有回到顶部按钮;而且文章的点赞和评论都在文章最底部,使用时并不方便。所以使用自定义右键菜单来实现回到顶部、点赞、评论这三个主要功能
页面设计
首先将这三个功能以一个列表
- 的形式放置。鼠标移入时样式改变,移出时还原
- 顶部
- 点赞
- 评论
body{margin: 0;}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
width: 100px;
text-align: center;
cursor: pointer;
font:20px/40px '宋体';
background-color: #eee;
}
.in:hover{
background-color: lightblue;
color: white;
font-weight:bold;
}
菜单逻辑
菜单逻辑共包括阻止默认行为、显隐效果和位置判断三个部分
默认行为
通常,点击右键时,会弹出浏览器的默认右侧菜单
通过return false可以实现阻止默认行为的效果,当然也可以使用preventDefault()和returnValue,详细信息移步至此
document.oncontextmenu = function(){
return false;
}
显隐
右键菜单默认隐藏,点击右键时显示,点击左键时再隐藏
关于元素显隐,个人总结过共9种思路,本文就用最简单的display属性
document.onclick = function(){
test.style.display = 'none';
}
document.oncontextmenu = function(){
test.style.display = 'block';
return false;
}
位置判断
鼠标对象共有6对坐标位置信息,若把右键菜单设置为fixed固定定位,则选择clientX/Y即可
一般地,右键菜单的左上角位置应该是当前鼠标的坐标处
但是,还有另外2种情况需要考虑
【1】如果鼠标的位置到视口底部的位置小于菜单的高度,则鼠标的位置为菜单的底部位置
【2】如果鼠标的位置到视口右侧的位置小于菜单的宽度,则视口的右侧为菜单的右侧
元素的尺寸信息共有偏移尺寸offset、可视区尺寸client和滚动尺寸scroll,此时菜单的宽高应该为偏移尺寸offsetWidth/offsetHeight(全尺寸包含width、padding、border)
document.onclick = function(){
test.style.display = 'none';
}
document.oncontextmenu = function(e){
e = e || event;
test.style.left = e.clientX + 'px';
test.style.top = e.clientY + 'px';
//注意,由于加法、减法的优先级高于大于、小于的优先级,所以不用加括号,详细情况移步至此
if(document.documentElement.clientHeight - e.clientY < test.offsetHeight){
test.style.top = e.clientY - test.offsetHeight + 'px';
}
if(document.documentElement.clientWidth - e.clientX < test.offsetWidth){
test.style.left = document.documentElement.clientWidth - test.offsetHeight + 'px';
}
test.style.display = 'block';
return false;
}
功能实现
共用有回到顶部、点赞和评论三个功能需要实现
回到顶部
回到顶部共有5种实现方法,下面使用可读写的scrollTop属性进行效果实现
var timer = null;
test.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 160;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
但是,上面的代码有一个问题,就是当页面内容较多时,回到顶部的动画效果将持续很长时间。因此,使用时间版的运动更为合适,假设回到顶部的动画效果共运动500ms,则代码如下所示
var timer = null;
test.onclick = function(){
cancelAnimationFrame(timer);
//获取当前毫秒数
var startTime = +new Date();
//获取当前页面的滚动高度
var b = document.body.scrollTop || document.documentElement.scrollTop;
var d = 500;
var c = b;
timer = requestAnimationFrame(function func(){
var t = d - Math.max(0,startTime - (+new Date()) + d);
document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
timer = requestAnimationFrame(func);
if(t == d){
cancelAnimationFrame(timer);
}
});
}
点赞
点赞函数是博客园自己写的,我们看不到内部函数也无法使用。如果想在右键菜单中使用点赞功能,就需要模拟点击事件。点击右键菜单中的点赞项时,触发博客园的自带的点赞项的click事件
由下图可知,点赞函数加在
由一个小例子来说明模拟点击事件如何实现
点击按钮1时,显示1;点击按钮2时,也要实现同样的功能
btn1.onclick= function(){
result.innerHTML += '1';
}
btn2.onclick = btn1.onclick;
如法炮制
window.onload = function(){
test.onclick = document.getElementById('div_digg').children[0].onclick;
}
增加获取最新点赞数的功能
当id为'menuFavour'的div元素被点击时,更新点赞数。但,由于从服务器获取最新数据以及相关元素的内容发生变化,都需要时间,所以增加2秒的延迟
//模拟原始点赞按钮的点击事件
menuFavour.onclick = document.getElementById('div_digg').children[0].onclick;
//获取赞成数的函数
function getfavourNum(){
favourNum.innerHTML = document.getElementById('digg_count').innerHTML;
}
//页面载入时获取赞成数
getfavourNum();
//点击菜单中的赞成项后,再获取最新的赞成数
menuFavour.addEventListener('click',function(){
setTimeout(function(){
getfavourNum();
},2000);
})
评论
点击右键菜单中的评论项时,页面定位到评论区的位置
由图中可知,评论区为
将元素置于可视区域内有很多方法,如scrollTo()、scrollBy()、通过scrollTop计算、scrollIntoView()方法等等,详细情况移步至此
下面利用scrollIntoView()方法滚动当前元素,进入浏览器的可见区域
window.onload = function(){
test.onclick = function(){
document.getElementById('comment_form_container').scrollIntoView();
}
}
完整源码
将HTML结构和CSS样式写成javascript生成的行为,最终形成一份js文件,代码如下
//requestAnimationFrame兼容写法
if(!window.requestAnimationFrame){
var lastTime = 0;
window.requestAnimationFrame = function(callback){
var currTime = new Date().getTime();
var timeToCall = Math.max(0,16.7-(currTime - lastTime));
var id = window.setTimeout(function(){
callback(currTime + timeToCall);
},timeToCall);
lastTime = currTime + timeToCall;
return id;
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
//事件处理程序兼容写法
function addEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else{
target.attachEvent('on'+type,function(event){
return handler.call(target,event);
});
}
}
/*******生成元素*******/
var list = document.createElement('ul');
list.id = 'list';
list.innerHTML = '
\\
';
document.body.appendChild(list);
/*******添加样式**********/
function loadStyles(str){
var style = document.createElement("style");
style.type = "text/css";
try{
style.innerHTML = str;
}catch(ex){
style.styleSheet.cssText = str;
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
loadStyles("#list{margin: 0!important;\
padding: 0!important;\
width: 120px;\
text-align: center;\
cursor: pointer;\
font:20px/40px '宋体';\
background-color: #eee;\
position:fixed;\
display:none;}\
#list li{list-style:none!important;}\
#list li:hover{background-color: lightblue;color: white;font-weight:bold;}");
//DOM结构稳定后,再操作
addEvent(window,'load', contextMenuLoad);
function contextMenuLoad(){
/********显示和隐藏菜单***********/
addEvent(document,'click',function(){
list.style.display = 'none';
})
//右键点击时,菜单显示
document.oncontextmenu = function(e){
e = e || event;
//通常情况下,菜单的位置就是鼠标的位置
list.style.left = e.clientX + 'px';
list.style.top = e.clientY + 'px';
//当鼠标的位置到视口底部的位置小于菜单的高度,则鼠标的位置为菜单的底部位置
if(document.documentElement.clientHeight - e.clientY < list.offsetHeight){
list.style.top = e.clientY - list.offsetHeight + 'px';
}
//当鼠标的位置到视口右侧的位置小于菜单的宽度,则视口的右侧为菜单的右侧
if(document.documentElement.clientWidth - e.clientX < list.offsetWidth){
list.style.left = document.documentElement.clientWidth - list.offsetHeight + 'px';
}
list.style.display = 'block';
//点击右键的同时按下ctrl键,那么将显示默认右键菜单
if(e.ctrlKey){
list.style.display = 'none';
//如果只是点击右键,则显示自定义菜单
}else{
return false;
}
}
/*********回到顶部功能*********/
var timer = null;
menuTop.onclick = function(){
cancelAnimationFrame(timer);
//获取当前毫秒数
var startTime = +new Date();
//获取当前页面的滚动高度
var b = document.body.scrollTop || document.documentElement.scrollTop;
var d = 500;
var c = b;
timer = requestAnimationFrame(function func(){
var t = d - Math.max(0,startTime - (+new Date()) + d);
document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
timer = requestAnimationFrame(func);
if(t == d){
cancelAnimationFrame(timer);
}
});
};
/*********点赞功能**********/
//模拟原始点赞按钮的点击事件
var digg = document.getElementById('div_digg');
if(digg){
menuFavour.onclick = digg.children[0].onclick;
}
//获取赞成数的函数
function getfavourNum(){
if(digg){
favourNum.innerHTML = digg.children[0].children[0].innerHTML;
}
}
//页面载入时获取赞成数
getfavourNum();
if(menuFavour.addEventListener){
menuFavour.addEventListener('click',function(){
setTimeout(function(){
getfavourNum();
},2000);
})
}else{
menuFavour.attachEvent('onclick',function(){
setTimeout(function(){
getfavourNum();
},2000);
})
}
/*********评论功能*********/
menuCommand.onclick = function(){
document.getElementById('comment_form_container').scrollIntoView();
}
}
当然,也可以直接引入js文件,文件在线地址为https://files.cnblogs.com/files/xiaohuochai/contextMenu.js
最后
如何演示?点击右键出现自定义菜单。按住ctrl键同时,点击右键,出现的是系统默认菜单
但是,在IE浏览器中,会提示无法获取博客园文档自动生成的
本文由 用户 于 2024-04-24 发布在 夸智网,如有疑问,请联系我们。
本文链接:https://www.kuazhi.com/post/713868128.html
发表评论