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> ...
随机推荐
- POJ 2226 Muddy Fields（最小顶点覆盖）
POJ 2226 Muddy Fields 题目链接 题意:给定一个图,要求用纸片去覆盖'*'的位置.纸片能够重叠.可是不能放到'.'的位置,为最少须要几个纸片 思路:二分图匹配求最小点覆盖.和放车那 ...
- Activity生命周期解决(有图有真相)
Activity完整的生命周期: 启动Activity的周期历程: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGVuZ2t2/font/5a6L5L2 ...
- 如何获得SQL Server索引使用情况
原文:如何获得SQL Server索引使用情况 原文出自: http://www.mssqltips.com/sqlservertip/1239/how-to-get-index-usage-info ...
- POJ3617 Best Cow Line 馋
虽然这个问题很简单,但非常好,由于过程是很不错的.发展思路的比较 并鼓励人们,不像有些贪心太偏,推动穷人,但恼人 鉴于长N弦S,然后又空字符串STR.每当有两个选择 1:删S增加虚假的第一要素STR于 ...
- 基于docker构建jenkins和svn服务(转)
码农们很定都知道svn的重要性,机器坏掉丢代码的惨痛教训想必很多人都有. jenkins可能很多人都不了解.这是一个持续集成的工具,在敏捷开发领域很流行:跟svn结合可以实现定期build.check ...
- height/innerHeight/outerHeight
<script> $(document).ready(function(){ alert("height:"+$("#div").height()) ...
- iis7、iis8配置备份还原
原文 iis7.iis8配置备份还原 方法1: 1.打开我们的IIS管理器,在功能视图里找到“共享的配置”这个功能然后双击进入. 2.进入“共享的配置”后单机右上方的“导出配置”选项,选择导出配置文件 ...
- Linux Howto
1. Customize the Xfce menu http://wiki.xfce.org/howto/customize-menu
- android studio 在线更新android sdk，遇到无法Fetching https://dl-ssl.google.com/...的解决方式
近期实在受不了eclipse的"迟钝",准备入手Android studio开发环境,可是貌似不太顺利,安装成功了Android studio,在线更新Android adk的时候 ...
- projecteuler---->problem=34----Digit factorials
Problem 34 145 is a curious number, as 1! + 4! + 5! = 1 + 24 + 120 = 145. Find the sum of all number ...