js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)


Posted in Javascript onSeptember 19, 2017

QQ面板拖拽,效果如图

js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)

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;
  //关闭页面
  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";


}

要点: 

1.阻止事件冒泡

loginState.onclick点击事件冒泡,导致下拉列表无法点开

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

}

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

}

lis[i].onclick列表项的点击事件冒泡,导致下拉列表无法隐藏 

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时,窗口不能继续外移
  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 < l; i++) {
  if (elements[i].className == clsName) {
   eles.push(elements[i]);
  }
 }
 return eles;
}

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

Javascript 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
js面试题之异步问题的深入理解
Sep 20 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 #Javascript
vue 粒子特效的示例代码
Sep 19 #Javascript
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
慕课网题目之js实现抽奖系统功能
Sep 19 #Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
JavaScript事件处理程序详解
Sep 19 #Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
You might like
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
php实现的操作excel类详解
2016/01/15 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
网络教育毕业生自我鉴定
2013/10/10 职场文书
市场营销专业毕业生自荐信
2013/11/02 职场文书
平面设计师的工作职责
2013/11/21 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
超市创意活动方案
2014/08/15 职场文书
助学感谢信范文
2015/01/21 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸