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 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
javascript实现获取字符串hash值
May 10 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 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
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP实现计算器小功能
2020/08/28 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
Python的几种主动结束程序方式
2019/11/22 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
学生喝酒检讨书
2014/02/06 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
安全教育培训制度
2015/08/06 职场文书
大学军训口号大全
2015/12/24 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL