在博客园博文中添加自定义右键菜单的方法详解
页面设计
首先将这三个功能以一个列表<ul>的形式放置。鼠标移入时样式改变，移出时还原
<style>
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;
}
</style>
<ul id="list" class="list">
<li class="in">顶部</li>
<li class="in">点赞</li>
<li class="in">评论</li>
</ul>
菜单逻辑
菜单逻辑共包括阻止默认行为、显隐效果和位置判断三个部分
默认行为
通常，点击右键时，会弹出浏览器的默认右侧菜单
通过return false可以实现阻止默认行为的效果，当然也可以使用preventDefault()和returnValue，详细信息移步至此
document.oncontextmenu = function(){
return false;
}
显隐
右键菜单默认隐藏，点击右键时显示，点击左键时再隐藏
关于元素显隐，个人总结过共9种思路，本文就用最简单的display属性
<div id="test" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
document.onclick = function(){
test.style.display = 'none';
}
document.oncontextmenu = function(){
test.style.display = 'block';
return false;
}
</script>
位置判断
鼠标对象共有6对坐标位置信息，若把右键菜单设置为fixed固定定位，则选择clientX/Y即可
一般地，右键菜单的左上角位置应该是当前鼠标的坐标处
但是，还有另外2种情况需要考虑
【1】如果鼠标的位置到视口底部的位置小于菜单的高度，则鼠标的位置为菜单的底部位置
【2】如果鼠标的位置到视口右侧的位置小于菜单的宽度，则视口的右侧为菜单的右侧
元素的尺寸信息共有偏移尺寸offset、可视区尺寸client和滚动尺寸scroll，此时菜单的宽高应该为偏移尺寸offsetWidth/offsetHeight(全尺寸包含width、padding、border)
<div id="test" style="position:fixed;height: 100px;width: 100px;background-color: pink;"></div>
<script>
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;
}
</script>
功能实现
共用有回到顶部、点赞和评论三个功能需要实现
回到顶部
回到顶部共有5种实现方法，下面使用可读写的scrollTop属性进行效果实现
<body style="height: 3000px;">
<button id="test" style="position:fixed;right:10px;bottom:10px;">回到顶部</button>
<script>
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);
}
});
}
</script>
</body>
但是，上面的代码有一个问题，就是当页面内容较多时，回到顶部的动画效果将持续很长时间。因此，使用时间版的运动更为合适，假设回到顶部的动画效果共运动500ms，则代码如下所示
<body style="height: 2000px;">
<button id="test" style="position:fixed;right:10px;bottom:10px;">回到顶部</button>
<script>
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);
}
});
}
</script>
</body>
点赞
点赞函数是博客园自己写的，我们看不到内部函数也无法使用。如果想在右键菜单中使用点赞功能，就需要模拟点击事件。点击右键菜单中的点赞项时，触发博客园的自带的点赞项的click事件
由下图可知，点赞函数加在<div class="diggit">上
由一个小例子来说明模拟点击事件如何实现
点击按钮1时，显示1；点击按钮2时，也要实现同样的功能
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<div id="result" style="height: 30px;width: 100px;background-color: pink;"></div>
<script>
btn1.onclick= function(){
result.innerHTML += '1';
}
btn2.onclick = btn1.onclick;
</script>
如法炮制
<div id="test">点赞</div>
<script>
window.onload = function(){
test.onclick = document.getElementById('div_digg').children[0].onclick;
}
</script>
增加获取最新点赞数的功能
当id为'menuFavour'的div元素被点击时，更新点赞数。但，由于从服务器获取最新数据以及相关元素的内容发生变化，都需要时间，所以增加2秒的延迟
<div id="menuFavour">点赞(<span id="favourNum">0</span>赞)</div>
<script>
//模拟原始点赞按钮的点击事件
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);
})
</script>
评论
点击右键菜单中的评论项时，页面定位到评论区的位置
由图中可知，评论区为<div id="comment_form_container">
将元素置于可视区域内有很多方法，如scrollTo()、scrollBy()、通过scrollTop计算、scrollIntoView()方法等等，详细情况移步至此
下面利用scrollIntoView()方法滚动当前元素，进入浏览器的可见区域
<div id="test">评论</div>
<script>
window.onload = function(){
test.onclick = function(){
document.getElementById('comment_form_container').scrollIntoView();
}
}
</script>
完整源码
将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 = '<li id="menuTop">回到顶部</li>\
<li id="menuFavour">点赞(<span id="favourNum">0</span>赞)</li>\
<li id="menuCommand">评论</li>';
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();
}
}
更多关于在博客园中添加代码的文章请点击下面的相关链接
相关推荐
-
打造博客园(cnblogs)超级自定义界面
定制博客界面的核心方法是通过引用我们自己上传的外部JS,使外部JS的代码能在当前博客页面上执行,从而用这个JS修改页面DOM结构(加入新的界面元素,加入引用自定义的CSS,加入新的界面交互功能),然后我们就可以在自己写的这个外部JS里任意发挥了. 在博客园中的博客页面中引用外部JS的方法: 进入博客设置页面->设置->子标题,在这里,你可以输入你博客的一些子标题的内容,同时,你其实还可以输入如下html:<script src="XXXX">XXXX代表你的JS
-
在博客园博文中添加自定义右键菜单的方法详解
页面设计 首先将这三个功能以一个列表<ul>的形式放置.鼠标移入时样式改变,移出时还原 <style> 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-
-
Spring Boot项目中定制拦截器的方法详解
这篇文章主要介绍了Spring Boot项目中定制拦截器的方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Servlet 过滤器属于Servlet API,和Spring关系不大.除了使用过滤器包装web请求,Spring MVC还提供HandlerInterceptor(拦截器)工具.根据文档,HandlerInterceptor的功能跟过滤器类似,但拦截器提供更精细的控制能力:在request被响应之前.request被响应之后.视
-
JavaScript 中有关数组对象的方法(详解)
JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .
-
Mongodb中MapReduce实现数据聚合方法详解
Mongodb是针对大数据量环境下诞生的用于保存大数据量的非关系型数据库,针对大量的数据,如何进行统计操作至关重要,那么如何从Mongodb中统计一些数据呢? 在Mongodb中,给我们提供了三种用于数据聚合的方式: (1)简单的用户聚合函数: (2)使用aggregate进行统计: (3)使用mapReduce进行统计: 今天我们首先来讲讲mapReduce是如何统计,在后续的文章中,将另起文章进行相关说明. MapReduce是啥呢?以我的理解,其实就是对集合中的各个满足条件的文档进行预处理
-
Javascript中的迭代、归并方法详解
迭代方法 在Javascript中迭代方法个人觉得尤为重要,在很多时候都会有实际上的需求,javascript提供了5个迭代方法来供我们操作,它们分别为: every() 对数组中的每一个项运用给定的函数,如果每项都返回true,那么就会返回true filter() 对数组中的每一个项运用给定的函数,把返回true的项组成一个新数组并返回 forEach() 对数组中的每一项运用给定的函数,但是没有任何的返回值 map() 对数组中的每一个项运用给定的函数并返回每次函数调用的结果组成新的数组
-
js基础之DOM中元素对象的属性方法详解
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个 文档节点 . 所有的HTML元素都是 元素节点 所有 HTML 属性都是 属性节点 文本插入到 HTML 元素是 文本节点 注释是 注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',
-
JavaScript中Number对象的toFixed() 方法详解
定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法 NumberObject.toFixed(num) 参数 描述 num 必需.规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围.如果省略了该参数,将用 0 代替. 返回值 返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字.如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度.如果 num 大于 l
-
JavaScript中关键字 in 的使用方法详解
for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为"枚举". 对于数组 ,迭代出来的是数组元素 但不推荐,因为不能保证顺序,而且如果在Array的原型上添加了属性,这个属性也会被遍历出来,所以 最好数组使用正常的for循环,对象使用for-in循环 对于对象 ,迭代出来的是对象的属性: var obj = { "key1":"value1", "key2":"value2", &q
-
Struts中使用validate()输入校验方法详解
1.在ActionSupport中有一个validate()方法,这个方法是验证方法,它会在execute()方法执行之前执行,所以能够起到很好的验证的作用. @Override //重写Action中的validate()方法 public void validate() { if(null==this.username||this.username.length()<4||this.username.length()>6){ this.addActionError("userna
-
struts2中使用注解配置Action方法详解
使用注解来配置Action可以实现零配置,零配置将从基于纯XML的配置转化为基于注解的配置.使用注解,可以在大多数情况下避免使用struts.xml文件来进行配置. struts2框架提供了四个与Action相关的注解类型,分别为ParentPackage.Namespace.Result和Action. ParentPackage:ParentPackage注解用于指定Action所在的包要继承的父包.该注解只有一个value参数.用于指定要继承的父包. 示例: 使用ParentPackage