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 相关文章推荐
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python中运行并行任务技巧
2015/02/26 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
创先争优演讲稿
2014/09/15 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
内勤岗位职责
2015/02/10 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技