dom03
鼠标事件：
键盘事件：
//通过class获取元素，封装一个通过class获取元素的方法
//IE10以下不支持document.getElementByClass()
function getByClass(className,parent){//必须的元素（前面），可选的元素
var oParent=parent?document.getElementById(parent):document,//如果有父元素传递过来，不传递父元素对象，而是传父元素上的ID；如果没传父元素就用document
eles=[],
elements=oParent.getElementsByTagName('*');//获取所有元素
for(var i=0,l=elements.length;i<l;i++){//遍历所有元素,可以同时初始化多个变量
if(elements[i].className==className){//等于传过来的className
eles.push(elements[i]);
}
}
return eles;
}
window.onload=drag;
function drag(){
var oTitle=getByClass('login_logo_webqq','loginPanel')[0];//数组中第一个元素;当前元素，父元素
//拖曳的操作
oTitle.onmousedown=fnDown;
}
//鼠标事件都是在浏览器窗口中的特定位置上发生的。
//这个位置信息保存在事件的clientX和clientY属性中
//所有浏览器都支持这两个属性
//他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。
function fnDown(event){
var oDrag=document.getElementById('loginPanel');
// document.onmousemove=function(event){//变量event接收事件对象
// event=event||window.event;//非IE 和IE浏览器对象不一样
// //document.title=event.clientX+','+event.clientY;
// oDrag.style.left=event.clientX+'px';
// oDrag.style.top=event.clientY+'px';
//光标按下时光标和面板之间的距离
disX=event.clientX-oDrag.offsetLeft,
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(e,posX,posY){
var oDrag=document.getElementById('loginPanel');
var l=e.clientX-posX,
t=e.clientY-posY,
winW=document.documentElement.clientWidth || document.body.clientWidth,
winH=document.documentElement.clientHeight||document.body.clientHeight,
maxW=winW-oDrag.offsetWidth,
maxH=winH-oDrag.offsetHeight;
if(l<0){
l=0;
}
else if(l>maxW){
l=maxW;
}
if(t<0){
t=0;
}else if(t>maxH){
t=maxH;
}
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
document.title=l;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
.login_logo_webqq{background-color: white; height: 8px; width: auto;}
.loginPanel{position: absolute;width: 80px; height: 40px; background-color: blue; border:1px solid blue;border-radius: 5px;}
</style>
<script src="drag.js"></script>
</head>
<body>
<div class='div'>
<div class='loginPanel' id='loginPanel'>
<div class='login_logo_webqq'></div>
</div>
</div>
</body>
</html>
dom03的更多相关文章
- eCharts_基于eCharts开发的一个多图表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- [Python 学习] 两、在Linux使用平台Python
在本节,它介绍了Linux如何使用平台Python 1. Python安装. 今天,大多数把自己的版本号Python的,它不能被安装.假设你要安装它,可以使用相应的安装指令. Fedora:先以roo ...
- SDUT oj 3005 打怪升级(内存搜索)
当比赛一直纠缠骑2如何做一个非常大的数量,数组不开啊...后来他们发现自己很傻啊,该数不超过最大10什么,这个上限就是力量100什么.. .. 其它的就是记忆化搜索啊,还有就是加一点力量的瓶子当时就要 ...
- 第十二章——SQLServer统计信息（2）——非索引键上统计信息的影响
原文:第十二章--SQLServer统计信息(2)--非索引键上统计信息的影响 前言: 索引对性能方面总是扮演着一个重要的角色,实际上,查询优化器首先检查谓词上的统计信息,然后才决定用什么索引.一般情 ...
- 新RSS reader
阅读之前采取正确的方法,但是非常不介意,没有收到订阅很大. 走到今天 http://www.feedspot.com 2014/11/8追加:用下来感觉不错. feedspot 的相关快捷键例如以下: ...
- 吐槽一下Activiti用户手册和一本书
业余没事的时候,读点Java轮廓,无意中发现Activiti.我们打算跑了几个例子来看看它是如何. 我们一直从事低层次.我们在上面的照顾偶尔有精确地的程度不是什么. 这个过程是如此悲惨开始.第一Act ...
- 找呀志_ContentResolver操作ContentProvider数据
当需要外部的应用ContentProvider该数据被添加.删.修改和查询操作.可以使用ContentResolver 类完成 要得到ContentResolver 物,可以使用Activity提供g ...
- DBA工具——DMV——如何知道TSQL语句已运行了多久
原文:DBA工具--DMV--如何知道TSQL语句已运行了多久 DBA通常想知道正在运行的语句已经执行了多久了?可以使用Sqlserver profiler来捕获语句的开始时间,和现有时间比较,但是在 ...
- ACM字符串处理算法经典：字符串搜索
语法:result=strfind(char str[],char key[]); 参数: str[]:在这个源字符串查找操作 key[]:搜索字符串.不能为空字符串 回报值: 假设查找成功. ...
- POJ 3982 序列 塔尔苏斯问题解决
而且还加入了大量的主题,直接或模板Java我们能够在水. 除了循环33它的时间,计算A99它是第几,输出准确回答. #include <stdio.h> #include <stri ...
- Oracle解锁的相关操作（转）
当某个数据库用户在数据库中插入.更新.删除一个表的数据,或者增加一个表的主键时或者表的索引时,常常会出现ora-00054:resource busy and acquire with nowait ...