本文实例讲述了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实现鼠标拖拽盒子移动及右键点击盒子消失效果示例