欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)QQ面板拖拽效果（慕課網(wǎng)DOM事件探秘）（全）

 更新時間：2017年09月19日 09:04:32   作者：喵嘻嘻  
這篇文章主要為大家詳細介紹了QQ面板拖拽效果，探秘慕課網(wǎng)DOM事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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];
  //拖頁
  oTitle.onmousedown = fnDown;
  //關(guān)閉頁面
  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");
  //點擊顯示下拉單
  loginState.onclick = function (e) {
    stateList.style.display = "block";
    //阻止事件冒泡；
    e = event || window.event;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }
  };
  //鼠標滑過,背景變色
  for (var i = 0; i < lis.length; i++) {
    lis[i].onmouseover = function () {
      this.style.backgroundColor = "#888";
    };
    lis[i].onmouseout = function () {
      this.style.backgroundColor = "#fff";
    };
    //鼠標點擊，txt改變，圖標改變
    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");
  //光標按下時光標和面板之間的距離；
  var disX = event.clientX - oDrag.offsetLeft;
  var disY = event.clientY - oDrag.offsetTop;
  //移動
  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;
  //當l=0時，窗口不能繼續(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";


}

要點： 

1.阻止事件冒泡

loginState.onclick點擊事件冒泡，導(dǎo)致下拉列表無法點開

loginState.onclick = function () {
  stateList.style.display = "block";

}

document.onclick = function () {
    stateList.style.display = "none";

}

lis[i].onclick列表項的點擊事件冒泡，導(dǎo)致下拉列表無法隱藏 

lis[i].onclick = function () {
  stateList.style.display = "none";

}

loginState.onclick = function () {
  stateList.style.display = "block";

}

2.鼠標事件坐標獲取

function fnDown(event) {
  var event = event || window.event;
  var oDrag = document.getElementById("loginPanel");
  //光標按下時光標和面板之間的距離；
  var disX = event.clientX - oDrag.offsetLeft;
  var disY = event.clientY - oDrag.offsetTop;
  //移動
  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;
  //當l=0時，窗口不能繼續(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()方法

方法返回的是一個數(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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 用js實現(xiàn)判斷當前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面

    用js實現(xiàn)判斷當前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面

    用js實現(xiàn)判斷當前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面，需要的朋友可以參考下。
    2011-05-05
  • 微信小程序開發(fā)常用功能點與使用方法總結(jié)

    微信小程序開發(fā)常用功能點與使用方法總結(jié)

    最近收集了一些小程序開發(fā)中常用到的知識點,記錄一下,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)常用功能點與使用方法的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • JavaScript中雙嘆號!!作用示例介紹

    JavaScript中雙嘆號!!作用示例介紹

    !!一般用來將后面的表達式強制轉(zhuǎn)換為布爾類型的數(shù)據(jù)，因為javascript是弱類型的語言，所以有時需要強制轉(zhuǎn)換為相應(yīng)的類型
    2014-09-09
  • require.js的用法詳解

    require.js的用法詳解

    本文給大家介紹require.js的用法，require.js的誕生是為了解決兩大問題，第一實現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應(yīng)，第二管理模塊之間的依賴性，便于代碼的編寫和維護，對require.js用法感興趣的朋友可以參考下本篇文章
    2015-10-10
  • JavaScript給按鈕綁定點擊事件（onclick）的方法

    JavaScript給按鈕綁定點擊事件（onclick）的方法

    這篇文章主要介紹了JavaScript給按鈕綁定點擊事件（onclick）的方法,涉及javascript綁定onclick的基本技巧,非常具有實用價值,需要的朋友可以參考下
    2015-04-04

    • 最新評論