好资源导航 » 文章资讯 » 在博客园博文中添加自定义右键菜单的方法详解

在博客园博文中添加自定义右键菜单的方法详解

2023-08-02 02:46:04 68

页面设计

首先将这三个功能以一个列表



顶部
点赞
评论

菜单逻辑

菜单逻辑共包括阻止默认行为、显隐效果和位置判断三个部分

默认行为

通常，点击右键时，会弹出浏览器的默认右侧菜单

通过returnfalse可以实现阻止默认行为的效果，当然也可以使用preventDefault()和returnValue，详细信息移步至此

document.oncontextmenu=function(){
returnfalse;
}

显隐

右键菜单默认隐藏，点击右键时显示，点击左键时再隐藏

关于元素显隐，个人总结过共9种思路，本文就用最简单的display属性

位置判断

鼠标对象共有6对坐标位置信息，若把右键菜单设置为fixed固定定位，则选择clientX/Y即可

一般地，右键菜单的左上角位置应该是当前鼠标的坐标处

但是，还有另外2种情况需要考虑

【1】如果鼠标的位置到视口底部的位置小于菜单的高度，则鼠标的位置为菜单的底部位置

【2】如果鼠标的位置到视口右侧的位置小于菜单的宽度，则视口的右侧为菜单的右侧

元素的尺寸信息共有偏移尺寸offset、可视区尺寸client和滚动尺寸scroll，此时菜单的宽高应该为偏移尺寸offsetWidth/offsetHeight(全尺寸包含width、padding、border)

功能实现

共用有回到顶部、点赞和评论三个功能需要实现

回到顶部

回到顶部共有5种实现方法，下面使用可读写的scrollTop属性进行效果实现


回到顶部

但是，上面的代码有一个问题，就是当页面内容较多时，回到顶部的动画效果将持续很长时间。因此，使用时间版的运动更为合适，假设回到顶部的动画效果共运动500ms，则代码如下所示


回到顶部

点赞函数是博客园自己写的，我们看不到内部函数也无法使用。如果想在右键菜单中使用点赞功能，就需要模拟点击事件。点击右键菜单中的点赞项时，触发博客园的自带的点赞项的click事件

由下图可知，点赞函数加在上

由一个小例子来说明模拟点击事件如何实现

点击按钮1时，显示1；点击按钮2时，也要实现同样的功能

按钮1
按钮2

如法炮制点赞

增加获取最新点赞数的功能

当id为'menuFavour'的div元素被点击时，更新点赞数。但，由于从服务器获取最新数据以及相关元素的内容发生变化，都需要时间，所以增加2秒的延迟

点赞(0赞)

点击右键菜单中的评论项时，页面定位到评论区的位置

由图中可知，评论区为

将元素置于可视区域内有很多方法，如scrollTo()、scrollBy()、通过scrollTop计算、scrollIntoView()方法等等，详细情况移步至此

下面利用scrollIntoView()方法滚动当前元素，进入浏览器的可见区域

评论

完整源码

将HTML结构和CSS样式写成javascript生成的行为，最终形成一份js文件，代码如下

//requestAnimationFrame兼容写法
if(!window.requestAnimationFrame){
varlastTime=0;
window.requestAnimationFrame=function(callback){
varcurrTime=newDate().getTime();
vartimeToCall=Math.max(0,16.7-(currTime-lastTime));
varid=window.setTimeout(function(){
callback(currTime+timeToCall);
},timeToCall);
lastTime=currTime+timeToCall;
returnid;
}
}
if(!window.cancelAnimationFrame){
window.cancelAnimationFrame=function(id){
clearTimeout(id);
};
}
//事件处理程序兼容写法
functionaddEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else{
target.attachEvent('on'+type,function(event){
returnhandler.call(target,event);
});
}
}
/*******生成元素*******/
varlist=document.createElement('ul');
list.id='list';
list.innerHTML='回到顶部\
点赞(0赞)\
评论';
document.body.appendChild(list);
/*******添加样式**********/
functionloadStyles(str){
varstyle=document.createElement("style");
style.type="text/css";
try{
style.innerHTML=str;
}catch(ex){
style.styleSheet.cssText=str;
}
varhead=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;}\
#listli{list-style:none!important;}\
#listli:hover{background-color:lightblue;color:white;font-weight:bold;}");
//DOM结构稳定后，再操作
addEvent(window,'load',contextMenuLoad);
functioncontextMenuLoad(){
/********显示和隐藏菜单***********/
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
更多关于在博客园中添加代码的文章请点击下面的相关链接
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
                
            
              
            
                                    上一篇
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
                
                                    下一篇
vue 翻页组件vue-flip-page效果
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            如何试出一个Android开发者真正的水平，【面试总结】
                        
                                            
                            rf安装之rf应用
                        
                                            
                            PS5系统重大更新明天发布 支持M.2 SSD存储扩展与电视扬声器的3D音频
                        
                                            
                            在这里观看苹果iphone13的发布
                        
                                            
                            2021年Gamescom亚洲游戏展将于10月14日至17日在新加坡举行
                        
                                            
                            佳能宣布EOS R3具备眼控自动对焦功能
                        
                                            
                            苹果第六代iPad mini约3213元起：全面屏设计 支持5G网络
                        
                                            
                            苹果发布Apple Watch7约2569元起：依旧圆角设计 屏幕区域变大
                        
                                            
                            Apple Watch Series 7发布 支持快充/超长续航/更大屏幕
                        
                                            
                            苹果新品国行价格汇总：覆盖2499-12999元
                        
                                            
                            [图]iPhone 13上市后iPhone 12/11/SE降价出售 最低只要3299元
                        
                                            
                            苹果iPhone 11、iPhone 12降价至最低3999元起
                        
                                            
                            iPhone 13系列国行价格公布：1TB创纪录1.3万
                        
                                            
                            新iPad mini国行上架：首次搭载全面屏、支持5G
                        
                                            
                            iPhone 13全系规格对比：mini还是单卡、Pro系列完整五核GPU
                        
                                            
                            iPhone 13 Pro系列发布：标配120Hz高刷、最大1TB
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图