js實(shí)現(xiàn)QQ面板拖拽效果（慕課網(wǎng)DOM事件探秘）（全）
更新時(shí)間：2017年09月19日 09:04:32 作者：喵嘻嘻
這篇文章主要為大家詳細(xì)介紹了QQ面板拖拽效果，探秘慕課網(wǎng)DOM事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
QQ面板拖拽，效果如圖
JavaScript代碼如下：
function getByClass(clsName, parent) {
var oParent = parent ? document.getElementById(parent) : document,
eles = [],
elements = oParent.getElementsByTagName('*');
for (var i = 0, l = elements.length; i < l; i++) {
if (elements[i].className == clsName) {
eles.push(elements[i]);
}
}
return eles;
}
window.onload = drag;
function drag() {
var oTitle = getByClass("login_logo_webqq", "loginPanel")[0];
//拖頁(yè)
oTitle.onmousedown = fnDown;
//關(guān)閉頁(yè)面
var close = document.getElementById("ui_boxyClose");
close.onclick = winClose;
//切換狀態(tài)
var loginState = document.getElementById("loginState");
var stateList = document.getElementById("loginStatePanel");
var lis = stateList.getElementsByTagName("li");
var stateTxt = document.getElementById("login2qq_state_txt");
var loginStateShow = document.getElementById("loginStateShow");
//點(diǎn)擊顯示下拉單
loginState.onclick = function (e) {
stateList.style.display = "block";
//阻止事件冒泡；
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
};
//鼠標(biāo)滑過(guò),背景變色
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.style.backgroundColor = "#888";
};
lis[i].onmouseout = function () {
this.style.backgroundColor = "#fff";
};
//鼠標(biāo)點(diǎn)擊，txt改變，圖標(biāo)改變
lis[i].onclick = function (e) {
stateList.style.display = "none";
//阻止事件冒泡
e = event || window.event;
if(typeof e.stopPropagation){
e.stopPropagation();
}else {
e.cancelBubble = true;
}
var id = this.id;
loginStateShow.className = "login-state-show "+id;
var text = getByClass("stateSelect_text",id)[0].innerHTML;
stateTxt.innerHTML = text;
}
}
document.onclick = function () {
stateList.style.display = "none";
}
}
function winClose() {
var box = document.getElementById("loginPanel");
box.style.display = "none";
}
function fnDown(event) {
var event = event || window.event;
var oDrag = document.getElementById("loginPanel");
//光標(biāo)按下時(shí)光標(biāo)和面板之間的距離；
var disX = event.clientX - oDrag.offsetLeft;
var disY = event.clientY - oDrag.offsetTop;
//移動(dòng)
document.onmousemove = function (event) {
event = event || window.event;
fnMove(event, disX, disY);
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
function fnMove(event, posX, posY) {
var oDrag = document.getElementById("loginPanel");
var l = event.clientX - posX;
var t = event.clientY - posY;
var winW = document.documentElement.clientWidth;
var winH = document.documentElement.clientHeight;
var maxW = winW - oDrag.offsetWidth - 10;
var maxH = winH - oDrag.offsetHeight;
//當(dāng)l=0時(shí)，窗口不能繼續(xù)外移
if (l < 0) {
l = 0;
} else if (l > maxW) {
l = maxW;
}
if (t < 10) {
t = 10;
} else if (t > maxH) {
t = maxH;
}
oDrag.style.left = l + "px";
oDrag.style.top = t + "px";
}
要點(diǎn)：
1.阻止事件冒泡
loginState.onclick點(diǎn)擊事件冒泡，導(dǎo)致下拉列表無(wú)法點(diǎn)開(kāi)
loginState.onclick = function () {
stateList.style.display = "block";
}
document.onclick = function () {
stateList.style.display = "none";
}
lis[i].onclick列表項(xiàng)的點(diǎn)擊事件冒泡，導(dǎo)致下拉列表無(wú)法隱藏
lis[i].onclick = function () {
stateList.style.display = "none";
}
loginState.onclick = function () {
stateList.style.display = "block";
}
2.鼠標(biāo)事件坐標(biāo)獲取
function fnDown(event) {
var event = event || window.event;
var oDrag = document.getElementById("loginPanel");
//光標(biāo)按下時(shí)光標(biāo)和面板之間的距離；
var disX = event.clientX - oDrag.offsetLeft;
var disY = event.clientY - oDrag.offsetTop;
//移動(dòng)
document.onmousemove = function (event) {
event = event || window.event;
fnMove(event, disX, disY);
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
function fnMove(event, posX, posY) {
var oDrag = document.getElementById("loginPanel");
var l = event.clientX - posX;
var t = event.clientY - posY;
var winW = document.documentElement.clientWidth;
var winH = document.documentElement.clientHeight;
var maxW = winW - oDrag.offsetWidth - 10;
var maxH = winH - oDrag.offsetHeight;
//當(dāng)l=0時(shí)，窗口不能繼續(xù)外移
if (l < 0) {
l = 0;
} else if (l > maxW) {
l = maxW;
}
if (t < 10) {
t = 10;
} else if (t > maxH) {
t = maxH;
}
oDrag.style.left = l + "px";
oDrag.style.top = t + "px";
}
3.封裝各瀏覽器通用的getElementsByClassName()方法
方法返回的是一個(gè)數(shù)組，切記
function getByClass(clsName, parent) {
var oParent = parent ? document.getElementById(parent) : document,
eles = [],
elements = oParent.getElementsByTagName('*');
for (var i = 0, l = elements.length; i < l; i++) {
if (elements[i].className == clsName) {
eles.push(elements[i]);
}
}
return eles;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Javascript DOM事件操作小結(jié)(監(jiān)聽(tīng)鼠標(biāo)點(diǎn)擊、釋放，懸停、離開(kāi)等)
- JavaScript DOM事件(筆記)
- JavaScript call apply使用 JavaScript對(duì)象的方法綁定到DOM事件后this指向問(wèn)題
- JS對(duì)象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流等js開(kāi)發(fā)基礎(chǔ)小結(jié)
- 關(guān)于javascript DOM事件模型的兩件事
- javascript循環(huán)變量注冊(cè)dom事件 之強(qiáng)大的閉包
- 談?wù)勎覍?duì)JavaScript DOM事件的理解
- 深入理解JS DOM事件機(jī)制
- 理解javascript中DOM事件
- js中DOM事件綁定分析
- JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級(jí)錯(cuò)誤問(wèn)題
- js DOM的事件常見(jiàn)操作實(shí)例詳解
相關(guān)文章
今天小編就為大家分享一篇淺談layui 表單元素的選中問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
uni-app使用uploadFile上傳多張圖片的具體實(shí)現(xiàn)
在微信小程序中不支持多張圖片上傳,需要做循環(huán)實(shí)現(xiàn)多張圖片上傳,下面這篇文章主要給大家介紹了關(guān)于uni-app使用uploadFile上傳多張圖片的具體實(shí)現(xiàn),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了javascript的this關(guān)鍵字的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js圖數(shù)據(jù)結(jié)構(gòu)處理 迪杰斯特拉算法代碼實(shí)例
這篇文章主要介紹了js圖數(shù)據(jù)結(jié)構(gòu)處理 迪杰斯特拉算法代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
用js實(shí)現(xiàn)判斷當(dāng)前網(wǎng)址的來(lái)路如果不是指定的來(lái)路就跳轉(zhuǎn)到指定頁(yè)面
用js實(shí)現(xiàn)判斷當(dāng)前網(wǎng)址的來(lái)路如果不是指定的來(lái)路就跳轉(zhuǎn)到指定頁(yè)面，需要的朋友可以參考下。
2011-05-05 
微信小程序開(kāi)發(fā)常用功能點(diǎn)與使用方法總結(jié)
最近收集了一些小程序開(kāi)發(fā)中常用到的知識(shí)點(diǎn),記錄一下,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序開(kāi)發(fā)常用功能點(diǎn)與使用方法的相關(guān)資料,需要的朋友可以參考下
2021-10-10 
!!一般用來(lái)將后面的表達(dá)式強(qiáng)制轉(zhuǎn)換為布爾類(lèi)型的數(shù)據(jù)，因?yàn)閖avascript是弱類(lèi)型的語(yǔ)言，所以有時(shí)需要強(qiáng)制轉(zhuǎn)換為相應(yīng)的類(lèi)型
2014-09-09 
本文給大家介紹require.js的用法，require.js的誕生是為了解決兩大問(wèn)題，第一實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁(yè)失去響應(yīng)，第二管理模塊之間的依賴性，便于代碼的編寫(xiě)和維護(hù)，對(duì)require.js用法感興趣的朋友可以參考下本篇文章
2015-10-10 
JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法
這篇文章主要介紹了JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法,涉及javascript綁定onclick的基本技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04