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> ...
随机推荐
- PL/SQL Developer ORA-12154: TNS: 无法解析指定的连接标识符
底: 在这台机器(Win7 64位置 最后)设备Oracle 11g的client(已安装32位ORACLEclient.假设安装64位ORACLEclient的时候,在CMD命令中 ...
- tomcatport占用，如何识别和kill
开始-执行-cmd,进netstat -ano你可以看到整个port入住. 增加要想知道谁占用了我们的port8080,输入下面命令 C:\Documents and Settings\Adminis ...
- 分散式-ubuntu12.04安装hadoop1.2.1
在hadoop1.2.1被预装在一份报告中安装说明java.我装了很多的版本号java以及许多的版本号hadoop,然后发现oracle-java7与hadoop1.2.1能够匹配. 一,安装详细过程 ...
- HDU2647(拓扑排序+反向建图)
题意不说了,说下思路. 给出的关系是a要求的工资要比b的工资多,因为尽可能的让老板少付钱,那么a的工资就是b的工资+1.能够确定关系为a>b,依据拓扑排序建边的原则是把"小于" ...
- 走向DBA[MSSQL篇] 针对大表 设计高效的存储过程【原理篇】 附最差性能sql语句进化过程客串
原文:走向DBA[MSSQL篇] 针对大表 设计高效的存储过程[原理篇] 附最差性能sql语句进化过程客串 测试的结果在此处 本篇详解一下原理 设计背景 由于历史原因,线上库环境数据量及其庞大,很多千 ...
- java通过抛异常来返回提示信息
结论:如果把通过抛异常的方式得到提示信息,可以使用java.lang.Throwable中的构造函数: public Throwable(String message) { fillInStackTr ...
- 怎么样Ubuntu正在使用root账号登录
一个. 因为当你需要 root 权限,使用 sudo 我们将能够做到这一点.假设你真的需要在 Ubuntu 启用 root 帐户的话,这是最好的运行下面的操作: 1.再次设置 root 的passwo ...
- Linux内核进程管理
介绍: 在Linux的内核的五大组成模块中,进程管理模块时很重要的一部分.它尽管不像内存管理.虚拟文件系统等模块那样复杂.也不像进程间通信模块那样条理化,但作为五大内核模块之中的一个,进程管理对我们理 ...
- 模式识别 - libsvm该函数的调用方法 详细说明
libsvm该函数的调用方法 详细说明 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26261173 须要载入(load)SVM ...
- Content://sms
package com.example.sms; import android.app.Activity; import android.app.Notification; import androi ...