小程序智能客服系统_js完成QQ面板拖拽效果(慕课

js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)       这篇文章主要为大家详细介绍了QQ面板拖拽效果,探秘慕课网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 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;
 //关闭页面
 var close = document.getElementById("ui_boxyClose");
 close.onclick = winClose;
 //切换状态
 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时,窗口不能继续外移
 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";

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时,窗口不能继续外移 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()方法

方法返回的是一个数组,切记

function getByClass(clsName, parent) {
 var oParent = parent document.getElementById(parent) : document,
 eles = [],
 elements = oParent.getElementsByTagName('*');
 for (var i = 0, l = elements.length; i i++) {
 if (elements[i].className == clsName) {
 eles.push(elements[i]);
 return eles;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。