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 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
jQuery filter函数使用方法
May 19 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
手机端转换rem适应
Apr 01 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
Vue实现简易计算器
2020/02/25 Javascript
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
化工实习心得体会
2014/09/09 职场文书
工作推荐信模板
2015/03/25 职场文书
肖申克救赎观后感
2015/06/02 职场文书
学校运动会加油词
2015/07/18 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL