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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
js日历功能对象
Jan 12 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
element中table高度自适应的实现
Oct 21 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
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
js中url对象化管理分析
2017/12/29 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Django和Flask框架优缺点对比
2019/10/24 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python 发送邮件方法总结
2020/08/10 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
护士实习自我鉴定
2013/10/22 职场文书
料理师求职信
2014/01/30 职场文书
体育个人工作总结
2015/02/09 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
高中班主任寄语
2019/06/21 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript