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

页面设计

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

    的形式放置。鼠标移入时样式改变,移出时还原

    
    
    • 顶部
    • 点赞
    • 评论

    菜单逻辑

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

    默认行为

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

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

    document.oncontextmenu = function(){
      return false;
    }

    显隐

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

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

    位置判断

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

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

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

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

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

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

    功能实现

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

    回到顶部

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

    
    
     

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

    
    
    

    点赞

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

    由下图可知,点赞函数加在

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

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

    
    
    
    如法炮制 
    点赞

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

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

    
    

    评论

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

    由图中可知,评论区为

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

    下面利用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();
      }
    }  

    更多关于在博客园中添加代码的文章请点击下面的相关链接

你可能感兴趣的:(在博客园博文中添加自定义右键菜单的方法详解)