本文實例講述了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.Vevb.com/code/HtmlJsRun測試一下運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
