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 相关文章推荐
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
微信小程序开发探究
Dec 27 Javascript
js实现漫天星星效果
Jan 19 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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 cache类代码(php数据缓存类)
2010/04/15 PHP
php猜单词游戏
2015/09/29 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
Python实现修改IE注册表功能示例
2018/05/10 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
python 实现客户端与服务端的通信
2020/12/23 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
端口镜像是怎么实现的
2014/03/25 面试题
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
银行实习生的自我评价
2014/01/13 职场文书
博士给导师的自荐信
2015/03/06 职场文书
预备党员转正意见
2015/06/01 职场文书
会议简报格式范文
2015/07/20 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript