當前位置 主頁 > 網站技術 > 代碼類 > 最大化 縮小

    在博客園博文中添加自定義右鍵菜單的方法詳解(2)

    欄目:代碼類 時間:2020-02-05 21:09

    但是,上面的代碼有一個問題,就是當頁面內容較多時,回到頂部的動畫效果將持續很長時間。因此,使用時間版的運動更為合適,假設回到頂部的動畫效果共運動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 class="diggit">上

    由一個小例子來說明模擬點擊事件如何實現

    點擊按鈕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秒的延遲

    <div >點贊(<span >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 >

    將元素置于可視區域內有很多方法,如scrollTo()、scrollBy()、通過scrollTop計算、scrollIntoView()方法等等,詳細情況移步至此

    下面利用scrollIntoView()方法滾動當前元素,進入瀏覽器的可見區域

    <div >評論</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 >回到頂部</li>\
      <li >點贊(<span >0</span>贊)</li>\
      <li >評論</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();
      }
    }  
    
    下一篇:沒有了
教我怎样炒股