欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年02月05日 16:31:08   作者：小火柴的藍(lán)色理想  
本文是DOM鼠標(biāo)事件的一個(gè)實(shí)際應(yīng)用。查看博客園的博客文章時(shí)，有的文章非常長(zhǎng)，卻沒(méi)有回到頂部按鈕；而且文章的點(diǎn)贊和評(píng)論都在文章最底部，使用時(shí)并不方便。所以使用自定義右鍵菜單來(lái)實(shí)現(xiàn)回到頂部、點(diǎn)贊、評(píng)論這三個(gè)主要功能,需要的朋友可以參考下

頁(yè)面設(shè)計(jì)

首先將這三個(gè)功能以一個(gè)列表<ul>的形式放置。鼠標(biāo)移入時(shí)樣式改變，移出時(shí)還原

<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">點(diǎn)贊</li>
  <li class="in">評(píng)論</li>
</ul>

菜單邏輯

菜單邏輯共包括阻止默認(rèn)行為、顯隱效果和位置判斷三個(gè)部分

默認(rèn)行為

通常，點(diǎn)擊右鍵時(shí)，會(huì)彈出瀏覽器的默認(rèn)右側(cè)菜單

通過(guò)return false可以實(shí)現(xiàn)阻止默認(rèn)行為的效果，當(dāng)然也可以使用preventDefault()和returnValue，詳細(xì)信息移步至此

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

顯隱

右鍵菜單默認(rèn)隱藏，點(diǎn)擊右鍵時(shí)顯示，點(diǎn)擊左鍵時(shí)再隱藏

關(guān)于元素顯隱，個(gè)人總結(jié)過(guò)共9種思路，本文就用最簡(jiǎn)單的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>

位置判斷

鼠標(biāo)對(duì)象共有6對(duì)坐標(biāo)位置信息，若把右鍵菜單設(shè)置為fixed固定定位，則選擇clientX/Y即可

一般地，右鍵菜單的左上角位置應(yīng)該是當(dāng)前鼠標(biāo)的坐標(biāo)處

但是，還有另外2種情況需要考慮

【1】如果鼠標(biāo)的位置到視口底部的位置小于菜單的高度，則鼠標(biāo)的位置為菜單的底部位置

【2】如果鼠標(biāo)的位置到視口右側(cè)的位置小于菜單的寬度，則視口的右側(cè)為菜單的右側(cè)

元素的尺寸信息共有偏移尺寸offset、可視區(qū)尺寸client和滾動(dòng)尺寸scroll，此時(shí)菜單的寬高應(yīng)該為偏移尺寸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';
  //注意，由于加法、減法的優(yōu)先級(jí)高于大于、小于的優(yōu)先級(jí)，所以不用加括號(hào)，詳細(xì)情況移步至此
  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>

功能實(shí)現(xiàn)

共用有回到頂部、點(diǎn)贊和評(píng)論三個(gè)功能需要實(shí)現(xiàn)

回到頂部

回到頂部共有5種實(shí)現(xiàn)方法，下面使用可讀寫的scrollTop屬性進(jìn)行效果實(shí)現(xiàn)

<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>

但是，上面的代碼有一個(gè)問(wèn)題，就是當(dāng)頁(yè)面內(nèi)容較多時(shí)，回到頂部的動(dòng)畫效果將持續(xù)很長(zhǎng)時(shí)間。因此，使用時(shí)間版的運(yùn)動(dòng)更為合適，假設(shè)回到頂部的動(dòng)畫效果共運(yùn)動(dòng)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);
  //獲取當(dāng)前毫秒數(shù)
  var startTime = +new Date();   
  //獲取當(dāng)前頁(yè)面的滾動(dòng)高度
  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>

點(diǎn)贊

點(diǎn)贊函數(shù)是博客園自己寫的，我們看不到內(nèi)部函數(shù)也無(wú)法使用。如果想在右鍵菜單中使用點(diǎn)贊功能，就需要模擬點(diǎn)擊事件。點(diǎn)擊右鍵菜單中的點(diǎn)贊項(xiàng)時(shí)，觸發(fā)博客園的自帶的點(diǎn)贊項(xiàng)的click事件

由下圖可知，點(diǎn)贊函數(shù)加在<div class="diggit">上

由一個(gè)小例子來(lái)說(shuō)明模擬點(diǎn)擊事件如何實(shí)現(xiàn)

點(diǎn)擊按鈕1時(shí)，顯示1；點(diǎn)擊按鈕2時(shí)，也要實(shí)現(xiàn)同樣的功能

<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">點(diǎn)贊</div>
<script>
window.onload = function(){
test.onclick = document.getElementById('div_digg').children[0].onclick;  
}
</script>

增加獲取最新點(diǎn)贊數(shù)的功能

當(dāng)id為'menuFavour'的div元素被點(diǎn)擊時(shí)，更新點(diǎn)贊數(shù)。但，由于從服務(wù)器獲取最新數(shù)據(jù)以及相關(guān)元素的內(nèi)容發(fā)生變化，都需要時(shí)間，所以增加2秒的延遲

<div id="menuFavour">點(diǎn)贊(<span id="favourNum">0</span>贊)</div>
<script>
//模擬原始點(diǎn)贊按鈕的點(diǎn)擊事件
menuFavour.onclick = document.getElementById('div_digg').children[0].onclick; 
//獲取贊成數(shù)的函數(shù)
function getfavourNum(){
  favourNum.innerHTML = document.getElementById('digg_count').innerHTML;  
}
//頁(yè)面載入時(shí)獲取贊成數(shù)
getfavourNum();
//點(diǎn)擊菜單中的贊成項(xiàng)后，再獲取最新的贊成數(shù)
menuFavour.addEventListener('click',function(){
  setTimeout(function(){
    getfavourNum();
  },2000); 
})
</script>

評(píng)論

點(diǎn)擊右鍵菜單中的評(píng)論項(xiàng)時(shí)，頁(yè)面定位到評(píng)論區(qū)的位置

由圖中可知，評(píng)論區(qū)為<div id="comment_form_container">

將元素置于可視區(qū)域內(nèi)有很多方法，如scrollTo()、scrollBy()、通過(guò)scrollTop計(jì)算、scrollIntoView()方法等等，詳細(xì)情況移步至此

下面利用scrollIntoView()方法滾動(dòng)當(dāng)前元素，進(jìn)入瀏覽器的可見(jiàn)區(qū)域

<div id="test">評(píng)論</div>
<script>
window.onload = function(){
  test.onclick = function(){
    document.getElementById('comment_form_container').scrollIntoView();
  }
}
</script>

完整源碼

將HTML結(jié)構(gòu)和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">點(diǎn)贊(<span id="favourNum">0</span>贊)</li>\
  <li id="menuCommand">評(píng)論</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結(jié)構(gòu)穩(wěn)定后，再操作
addEvent(window,'load', contextMenuLoad);
function contextMenuLoad(){
  /********顯示和隱藏菜單***********/
  addEvent(document,'click',function(){
    list.style.display = 'none';
  })
  //右鍵點(diǎn)擊時(shí)，菜單顯示
  document.oncontextmenu = function(e){
    e = e || event;
    //通常情況下，菜單的位置就是鼠標(biāo)的位置
    list.style.left = e.clientX + 'px';
    list.style.top = e.clientY + 'px';
    //當(dāng)鼠標(biāo)的位置到視口底部的位置小于菜單的高度，則鼠標(biāo)的位置為菜單的底部位置
    if(document.documentElement.clientHeight - e.clientY < list.offsetHeight){
      list.style.top = e.clientY - list.offsetHeight + 'px';
    }
    //當(dāng)鼠標(biāo)的位置到視口右側(cè)的位置小于菜單的寬度，則視口的右側(cè)為菜單的右側(cè)
    if(document.documentElement.clientWidth - e.clientX < list.offsetWidth){
      list.style.left = document.documentElement.clientWidth - list.offsetHeight + 'px';
    }
    list.style.display = 'block';
    //點(diǎn)擊右鍵的同時(shí)按下ctrl鍵，那么將顯示默認(rèn)右鍵菜單
    if(e.ctrlKey){
      list.style.display = 'none';
    //如果只是點(diǎn)擊右鍵，則顯示自定義菜單
    }else{
      return false;
    }    
  }  
  /*********回到頂部功能*********/
  var timer = null;  
  menuTop.onclick = function(){
    cancelAnimationFrame(timer);
    //獲取當(dāng)前毫秒數(shù)
    var startTime = +new Date(); 
    //獲取當(dāng)前頁(yè)面的滾動(dòng)高度
    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);
    } 
    });
  };
  /*********點(diǎn)贊功能**********/
  //模擬原始點(diǎn)贊按鈕的點(diǎn)擊事件
  var digg = document.getElementById('div_digg');
  if(digg){
    menuFavour.onclick = digg.children[0].onclick;      
  }
  //獲取贊成數(shù)的函數(shù)
  function getfavourNum(){
    if(digg){
      favourNum.innerHTML = digg.children[0].children[0].innerHTML;
    }      
  }
  //頁(yè)面載入時(shí)獲取贊成數(shù)
  getfavourNum();
  if(menuFavour.addEventListener){
    menuFavour.addEventListener('click',function(){
      setTimeout(function(){
        getfavourNum();
      },2000);
    })  
  }else{
    menuFavour.attachEvent('onclick',function(){
      setTimeout(function(){
        getfavourNum();
      },2000);
    })    
  }
  /*********評(píng)論功能*********/
  menuCommand.onclick = function(){
    document.getElementById('comment_form_container').scrollIntoView();
  }
}

更多關(guān)于在博客園中添加代碼的文章請(qǐng)點(diǎn)擊下面的相關(guān)鏈接

相關(guān)文章

最新評(píng)論