JS實現(xiàn)鼠標(biāo)拖拽盒子移動及右鍵點擊盒子消失效果示例
更新時間：2019年01月29日 14:34:31 作者：s_psycho
這篇文章主要介紹了JS實現(xiàn)鼠標(biāo)拖拽盒子移動及右鍵點擊盒子消失效果,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)鼠標(biāo)拖拽盒子移動及右鍵點擊盒子消失效果。分享給大家供大家參考，具體如下：
1. 鼠標(biāo)拖拽盒子移動效果
<!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. 鼠標(biāo)右鍵使盒子消失
<!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測試一下運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家介紹了JS代碼計算LocalStorage容量的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
js統(tǒng)計錄入文本框中字符的個數(shù)并加以限制不超過多少
為了更直觀的體現(xiàn)用戶在文本框輸入文本時能看到自己輸入了多少字，并且有些特殊的要求字?jǐn)?shù)不超過多少，本文給出了具體的實現(xiàn)2014-05-05
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
微信小程序 獲取手機(jī)號 JavaScript解密示例代碼詳解
這篇文章主要介紹了微信小程序 獲取手機(jī)號 JavaScript解密的示例代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)下拉框選擇組件的開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
等待指定時間后自動跳轉(zhuǎn)或關(guān)閉當(dāng)前頁面的js代碼
本文為大家詳細(xì)介紹下如何通過js實現(xiàn)等待指定時間后自動跳轉(zhuǎn)或關(guān)閉當(dāng)前頁面的腳步代碼，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
使用JSON.parse將json字符串轉(zhuǎn)換成json對象的時候會出錯
使用JSON.parse將json字符串轉(zhuǎn)換成json對象的時候會出錯，主要是雙引號，回車換行等影響明顯，左尖括號和右尖括號也會導(dǎo)致顯示問題2014-09-09
JS實現(xiàn)動態(tài)添加DOM節(jié)點和事件的方法示例
這篇文章主要介紹了JS實現(xiàn)動態(tài)添加DOM節(jié)點和事件的方法,涉及javascript事件響應(yīng)及針對頁面dom元素節(jié)點與屬性的動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
IE11下CKEditor在Bootstrap Modal中下拉問題的解決
這篇文章主要介紹了IE11下CKEditor在Bootstrap Modal中下拉問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了JS將光標(biāo)聚焦在文本最后的方法,需要的朋友可以參考下2014-03-03