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

来源：意榕旅游网

本文实例讲述了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.jb51.net/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数算用法总结》

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