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

  

本文实例讲述了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果。分享给大家供大家参考,具体如下:

  

<强> 1。鼠标拖拽盒子移动效果

        & lt; !DOCTYPE html>   & lt; html lang=癳n”比;   & lt; head>   & lt;元charset=皍tf - 8”比;   & lt; title> Title   & lt; style>   * {   保证金:0;   填充:0;   }   div {   宽度:100 px;   身高:100 px;   背景:蓝色;   位置:绝对的;   }   & lt;/style>   & lt;/head>   & lt; body>   & lt; div>   & lt;/div>   & lt; script>   窗口。onload=function () {   var oDiv=document.getElementsByTagName (" div ") [0];   oDiv。onmousedown=function () {   文档。onmousemove=function (ev) {   var事件=window.event | |电动汽车;   oDiv.style.left=event.clientX +“px”;   oDiv.style.top=event.clientY +“px”;   }   文档。onmouseup=function () {   document.onmousemove=零;   document.onmouseup=零;   }   }   }   & lt;/script>   & lt;/body>   & lt;/html>      之前      

<强> 2。鼠标右键使盒子消失

        & lt; !DOCTYPE html>   & lt; html lang=癳n”比;   & lt; head>   & lt;元charset=皍tf - 8”比;   & lt; title> Title   & lt; style>   * {   保证金:0;   填充:0;   }   div {   宽度:100 px;   身高:100 px;   背景:红色;   显示:块;   }   & lt;/style>   & lt;/head>   & lt; body>   & lt; div>   & lt;/div>   & lt; script>   窗口。onload=function () {   文档。oncontextmenu事件=function () {   var oDiv=document.getElementsByTagName (" div ") [0];   oDiv.style.display="没有"   返回假   }   }   & lt;/script>   & lt;/body>   & lt;/html>      之前      

感兴趣的朋友可以使用:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

  

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

  

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

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