QQ面板拖拽(慕课网DOM事件探秘)(下)
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;
}
QQ面板拖拽(慕课网DOM事件探秘)(下)的更多相关文章
- QQ面板拖拽(慕课网DOM事件探秘)(上)
QQ面板拖拽,效果如图 JavaScript代码如下: function getByClass(clsName, parent) { var oParent = parent ? document.g ...
- 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android高级控件(六)——自定义ListView高仿一个QQ可拖拽列表的实现
Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...
- DOM事件探秘
说到DOM事件,就不得不说以下几点: 1 事件流 事件流:描述的是从页面中接受事件的顺序 事件流分为事件冒泡流和事件捕获流.那么什么是事件冒泡,什么是事件捕获呢? 事件冒泡:即事件最开始由最具体的元素 ...
- 模拟拖拽图片 碰撞检测 DOM 鼠标事件 闭包
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- 鼠标拖拽定位和DOM各种尺寸详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 拖拽碰撞效果,高级浏览器下全部搞定(ie6-8还没有搞定)
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- javascript--鼠标拖拽窗口案例(鼠标按下,在鼠标移动过程中,盒子跟着一起移动,鼠标松开,盒子停止移动)
界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...
- 二、JavaScript语言--事件处理--DOM事件探秘
第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netsca ...
随机推荐
- 传统maven项目创建
转自:https://blog.csdn.net/wangfengtong/article/details/77098238 需求表均同springmvc案例 此处只是使用maven 注意,以下所有需 ...
- 【Nginx安装】CentOS7安装Nginx及配置
[Nginx安装]CentOS7安装Nginx及配置 2018年03月05日 11:07:21 阅读数:7073 Nginx是一款轻量级的网页服务器.反向代理服务器.相较于Apache.lighttp ...
- Redis使用基本套路
Redis的数据,通常都是来自于数据库. 存入Redis当中,可以快速的查询.不用每次都关联查询,然后其他处理什么的. 通常可以把一些,不经常变的数据存储其中. 避免数据变动,而Redis缓存数据不变 ...
- 【CQ18阶梯赛第一场】题解
[A-风格不统一如何写程序] 输入字符串,得到长度,对于每个字符:如果是大写,则改为:‘_’+小写:如果是‘_’则忽略‘_’,并且把后面的小写改为大写. #include<cstdio> ...
- struts2通用标签
Struts2框架为我们提供了很多标签,这些标签总体上可以分为两类:通用标签和UI标签.通用标签分为两类:数据标签和控制标签.数据标签用于访问值栈中数据,控制标签用于控制呈现页面时数据执行流程.使用S ...
- Linux系统之文件传输的几种方式
Linux系统安装好以后以及能上网.能进行软件安装后,接下来可能就需要从其它机器复制一些文件或者把文件复制到其它机器,那么就涉及到文件的传输和共享,下面介绍一下常规的一些文件传输和共享方案. 1.传统 ...
- JAVA线程同步 (三)信号量
一个信号量有且仅有3种操作,且它们全部是原子的:初始化.增加和减少 增加可以为一个进程解除阻塞: 减少可以让一个进程进入阻塞. 信号量维护一个许可集,若有必要,会在获得许可之前阻塞每一个线程: ...
- ORA-01152: 文件 1 没有从过旧的备份中还原
转自:http://blog.itpub.net/8520577/viewspace-1255794/ 做了一个全备 RMAN> show all; 使用目标数据库控制文件替代恢复目录db_un ...
- hdu 1398 Square Coins【生成函数】
预处理出完全平方数就和普通的生成函数解整数拆分一样了 #include<iostream> #include<cstdio> using namespace std; cons ...
- 洛谷 P1314 聪明的质监员【二分+前缀和】
真是zz, 题目很显然是二分W,然后判断,我一开始是用线段树维护当前w[i]>W的个数和v(公式就是区间满足要求的个数*满足要求的v的和),然后T成70 后来想到树状数组差分常数或许会小,于是改 ...