JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例


Posted in Javascript onJanuary 29, 2019

本文实例讲述了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果。分享给大家供大家参考,具体如下:

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>

2. 鼠标右键使盒子消失

<!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代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
DWZ刷新dialog解决方法
Mar 03 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
javascript获取元素的计算样式
May 24 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 #Javascript
JS实现的类似微信聊天效果示例
Jan 29 #Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 #Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 #Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 #Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 #Javascript
vue实现的下拉框功能示例
Jan 29 #Javascript
You might like
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP 命名空间实例说明
2011/01/27 PHP
php基本函数汇总
2015/07/09 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
vue+iview分页组件的封装
2020/11/17 Vue.js
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python标准库itertools的使用方法
2020/01/17 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
煤矿班组长岗位职责
2013/12/29 职场文书
运动会开幕式主持词
2014/03/28 职场文书
党员承诺书怎么写
2014/05/20 职场文书
超市创业计划书
2014/09/15 职场文书
大班下学期个人总结
2015/02/13 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书