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 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
浅谈JavaScript作用域和闭包
Sep 18 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 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
zend framework中使用memcache的方法
2016/03/04 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python实现点对点聊天程序
2018/07/28 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python numpy数组转置与轴变换
2019/11/15 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
python开根号实例讲解
2020/08/30 Python
python re模块常见用法例举
2021/03/01 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
厂长岗位职责
2014/02/19 职场文书
导师对论文的学术评语
2015/01/04 职场文书
英语感谢信范文
2015/01/20 职场文书
教师反邪教心得体会
2016/01/15 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL