首先将这三个功能以一个列表<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> <li>顶部</li> <li>点赞</li> <li>评论</li> </ul>
菜单逻辑菜单逻辑共包括阻止默认行为、显隐效果和位置判断三个部分
默认行为通常，点击右键时，会弹出浏览器的默认右侧菜单
通过return false可以实现阻止默认行为的效果，当然也可以使用preventDefault()和returnValue，详细信息移步至此
document.oncontextmenu = function(){ return false; }
显隐右键菜单默认隐藏，点击右键时显示，点击左键时再隐藏
关于元素显隐，个人总结过共9种思路，本文就用最简单的display属性
<div></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></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> <button>回到顶部</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> <button>回到顶部</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>上
由一个小例子来说明模拟点击事件如何实现
点击按钮1时，显示1；点击按钮2时，也要实现同样的功能
<button>按钮1</button> <button>按钮2</button> <div></div> <script> btn1.onclick= function(){ result.innerHTML += '1'; } btn2.onclick = btn1.onclick; </script> 如法炮制 <div>点赞</div> <script> window.onload = function(){ test.onclick = document.getElementById('div_digg').children[0].onclick; } </script>
增加获取最新点赞数的功能
当id为'menuFavour'的div元素被点击时，更新点赞数。但，由于从服务器获取最新数据以及相关元素的内容发生变化，都需要时间，所以增加2秒的延迟