本文實例講述了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>
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
