鼠标事件:

键盘事件:

//通过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的更多相关文章

  1. eCharts_基于eCharts开发的一个多图表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Struts2 拦截器—拦截action

    对于拦截器的基本使用这里我就懒得打字了,我这里就讲下如何用 Struts2 拦截器 拦截action.这是我个人的想法,如果有什么不对的,或者你们有什么更好的方法.请多多留言! 拦截器的默认拦截的方法 ...

  2. C#基础之二

    C#基础之二 1.  静态字段.静态成员:由该类的所有实例共享,其变化,实例是对所有可见. 2.  声明为static有:场.方法.属性.构造函数.运营商.事件. 3.  不同的常量静态量:位置,在编 ...

  3. thinkphp3.2 代码生成并点击验证码

    本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识.小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...

  4. 简单的方法来改善手机3G上网速度(2G转3G)

           这里提到的方法是将手机信号不好的地方(也就是2G信号)强制转换为3G信号上网以至于提高上网速度,大家常常看到在某个地方(比方坐地铁)手机明明是3G卡,却显示的是2G信号,这就是手机老在2 ...

  5. Programming from the ground up(0)

    这本书的英文版是开源.我读了一些.但是,支持的英语水平不走太,然后还有那些谁译的书,但感觉不是太干脆翻译,在一些地方难以清除作者的思路,所以,我要揍很难理解他自己翻译一下原来的地方,这将更好地了解一点 ...

  6. WPF学习(11)2D绘图

    本篇我们来学习WPF的绘图,在2D绘图中主要有这么几个重要的类:Drawing.Visual和Shape,顺便讲下Brush和BitmapEffect. 1 2D绘图 1.1Drawing类 Draw ...

  7. Node.js v0.10.31API手冊-事件

    Node.js v0.10.31API手冊-文件夹 Events(事件) Node里面的很多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一个fs.readStrea ...

  8. Balanced Binary Tree(Java代码没有结束,是什么原因???)

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  9. SCM文章4教训:定时器共阴极LED动态显示屏

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva290ZWlfODhfbHVsdWNfNjY=/font/5a6L5L2T/fontsize/400/fil ...

  10. NSIS:延时启动软件的几个方法及探索

    原文NSIS:延时启动软件的几个方法及探索 有时候,我们想要某软件开机启动,但又不要拖慢开机速度,那么,延时启动技术就显得比较重要了.轻狂在这方面曾经研究过,也实现了自己想要的功能,看看我是怎么做的吧 ...