JS實現(xiàn)鼠標拖拽盒子移動及右鍵點擊盒子消失效果示例-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)建站主營昌邑網(wǎng)站建設(shè)的網(wǎng)絡公司,主營網(wǎng)站建設(shè)方案,App定制開發(fā),昌邑h5微信小程序開發(fā)搭建,昌邑網(wǎng)站營銷推廣歡迎昌邑等地區(qū)企業(yè)咨詢

1. 鼠標拖拽盒子移動效果

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

當前名稱：JS實現(xiàn)鼠標拖拽盒子移動及右鍵點擊盒子消失效果示例-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://muchs.cn/article10/cdojdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務器、App開發(fā)、域名注冊、Google、網(wǎng)站排名、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司