JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果示例

更新時(shí)間：2019年01月29日 14:34:31 作者：s_psycho

這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動(dòng)及右鍵點(diǎn)擊盒子消失效果。分享給大家供大家參考，具體如下：

1. 鼠標(biāo)拖拽盒子移動(dòng)效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    div{
      width: 100px;
      height: 100px;
      background: blue;
      position: absolute;
    }
  </style>
</head>
<body>
<div>
</div>
<script>
  window.onload=function () {
    var oDiv=document.getElementsByTagName("div")[0];
    oDiv.onmousedown=function () {
      document.onmousemove=function (ev) {
        var event=window.event||ev;
        oDiv.style.left=event.clientX+"px";
        oDiv.style.top=event.clientY+"px";
      }
      document.onmouseup=function (){
        document.onmousemove=null;
        document.onmouseup=null;
      }
    }
  }
</script>
</body>
</html>

2. 鼠標(biāo)右鍵使盒子消失

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 100px;
      background: red;
      display: block;
    }
  </style>
</head>
<body>
<div>
</div>
<script>
  window.onload=function () {
    document.oncontextmenu=function () {
      var oDiv=document.getElementsByTagName("div")[0];
      oDiv.style.display="none"
      return false
    }
  }
</script>
</body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試一下運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS代碼計(jì)算LocalStorage容量示例詳解
這篇文章主要為大家介紹了JS代碼計(jì)算LocalStorage容量的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
js統(tǒng)計(jì)錄入文本框中字符的個(gè)數(shù)并加以限制不超過多少
為了更直觀的體現(xiàn)用戶在文本框輸入文本時(shí)能看到自己輸入了多少字，并且有些特殊的要求字?jǐn)?shù)不超過多少，本文給出了具體的實(shí)現(xiàn)
2014-05-05
原生js實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
微信小程序獲取手機(jī)號(hào) JavaScript解密示例代碼詳解
這篇文章主要介紹了微信小程序獲取手機(jī)號(hào) JavaScript解密的示例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-05-05
原生js實(shí)現(xiàn)下拉框選擇組件
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)下拉框選擇組件的開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
等待指定時(shí)間后自動(dòng)跳轉(zhuǎn)或關(guān)閉當(dāng)前頁面的js代碼
本文為大家詳細(xì)介紹下如何通過js實(shí)現(xiàn)等待指定時(shí)間后自動(dòng)跳轉(zhuǎn)或關(guān)閉當(dāng)前頁面的腳步代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
使用JSON.parse將json字符串轉(zhuǎn)換成json對(duì)象的時(shí)候會(huì)出錯(cuò)
使用JSON.parse將json字符串轉(zhuǎn)換成json對(duì)象的時(shí)候會(huì)出錯(cuò)，主要是雙引號(hào)，回車換行等影響明顯，左尖括號(hào)和右尖括號(hào)也會(huì)導(dǎo)致顯示問題
2014-09-09
JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法,涉及javascript事件響應(yīng)及針對(duì)頁面dom元素節(jié)點(diǎn)與屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
IE11下CKEditor在Bootstrap Modal中下拉問題的解決
這篇文章主要介紹了IE11下CKEditor在Bootstrap Modal中下拉問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
JS將光標(biāo)聚焦在文本最后的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS將光標(biāo)聚焦在文本最后的方法,需要的朋友可以參考下
2014-03-03