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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 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
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
vuex存储token示例
2019/11/11 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
人民调解员先进事迹材料
2014/05/08 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
信用卡催款律师函
2015/05/27 职场文书
初中美术教学反思
2016/02/17 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers