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

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

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

    頁面設計

    首先將這三個功能以一個列表<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  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  ></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> 
    
    下一篇:沒有了
777亚洲人成视频免费视频