常用鼠标事件，键盘事件总结
今天学习了学习了QQ登录面板的拖拽，关闭，切换登录状态。完全自己练习写了一遍。通过自己动手练习，对html，css，JavaScript又进一步的巩固与拓展。
制作静面图展示：
由于是初步的学习，发现，css中有很多属性，自己都没有用过：
在这次制作过程中遇到一些重要但是自己没有用过的属性，记录下：
-moz-：firefox浏览器特有属性；
-webkit-:chrome,safari浏览器特有的属性；
border-radius：使用圆角边框。参数按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
一个参数：将用于全部的于四个角。
两个参数：第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
三个参数：第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
box-shadow:设置阴影。none：是指无阴影；正常5个参数；
使用方法：box-shadow:0 0 8px 8px #000;
接触了JavaScript中一些常用的鼠标事件：
onmousedown:用鼠标点击某个元素要触发的动作；
onmousemove：当鼠标指针在元素内部移动时，反复的触发某个动作；
onmouseup：当释放鼠标按键时要触发的动作；
onmouseover：鼠标指针划到某个元素上面要触发的动作；
onmouseout：鼠标指针离开某个元素是要触发的动作；
在制作qq面板时的一些重要知识点：
处理面板跟随鼠标时的知识：
1、当鼠标点击某个事件时，这个事件对象包含clientX和clientY这两个属性。代表了，该事件在窗口中的横纵坐标。
2、offsetXxxx属性：如offsetLeft，指的是获取此时的元素相对于它的父元素的左侧偏移量，即表示事件发生时鼠标指针在窗口中的水平和垂直坐标，不包括页面滚动的距离。
3、A.offsetWidth和A.offsetHeight属性：获取A元素的宽度和高度。
4、注意在适当时候阻止事件冒泡,否则，某页效果会被覆盖。我们无法看到。很重要。
在提及一下事件冒泡的阻止方法：对象.stopPropagation();和ie中方法：对象.cancelBubble=true;
JavaScript代码实现：
// JavaScript Document
//getElementsByClassName();方法不是在任何浏览器中都好使的，我们封装一个方法来处理取得类名的封装方法；
function getClassName(clsName,parent){
var object=parent?document.getElementById(parent):document;
els=[];
elements=object.getElementsByTagName("*");
for(var i=0;imaxW)
l=maxW;
if(t<0)
t=0;
if(t>maxH){
t=maxH;
}
panel.style.left=l+"px";
panel.style.top=t+"px";
} qq面板图案设置css：
@charset "utf-8";
/* CSS Document */
.panel{
width:320px;
height:200px;
position:absolute;
background-color:#f6f6f6;
top:180px;
left:521px;
border:solid 1px #ccc;
-moz-box-shadow:0 0 8px #000;
-webkit-box-shadow:0 0 8px #000;
box-shadow:0 0 8px #000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.CloseButton{
position:absolute;
right:-10px;
z-index:1;
width:28px;
height:28px;
background:url(../picture/close.png);
margin-right:10px;
}
.topPicture{
margin-left:70px;
margin-top:10px;
width:200px;
height:44px;
background:url(../picture/login_window_logo.png) no-repeat -210px 0;
cursor:move;
}
.center{
margin-left:50px;
font: bold 15px arial;
}
.center .text{
width:150px;
line-height:18px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
color: #868686;
font-size: 16px;
}
.center .inputText{
margin-top:20px;
margin-bottom:20px;
}
.loginButton{
width:111px;
height:35px;
margin-left:64px;
background:url(../picture/login_btn.png) no-repeat -111px 0px;
float:left;
}
.statusPicture{
width:15px;
height:15px;
position:absolute;
left:180px;
bottom:12px;
}
.Triangle{
width:10px;
height:15px;
background:url(../picture/ptlogin.png) no-repeat 0px -15px;
position:absolute;
left:200px;
bottom:15px;
}
.statusText{
position:absolute;
left:215px;
bottom:12px;
}
.menu{
margin-left:10px;
padding-left:27px;
background-color:#f6f6f6;
width:71px;
height:112px;
list-style:none;
position:absolute;
left:160px;
bottom:-125px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
.selectIcon{
width:15px;
height:15px;
position:absolute;
left:10px;
float:left;
}
.Online{
background:url(../picture/ptlogin.png);
}
.QME{
background:url(../picture/ptlogin.png) no-repeat -72px 0;
}
.Leave{
background:url(../picture/ptlogin.png) no-repeat -18px 0;
}
.Busy{
background:url(../picture/ptlogin.png) no-repeat -36px 0;
}
.nono{
background:url(../picture/ptlogin.png) no-repeat -107px 0;
}
.hidden{
background:url(../picture/ptlogin.png) no-repeat -53px 0;
}
qq面版
账号:
密码:
在线
对于键盘事件练习了抽奖系统：
onkeydown:当用户按下键盘上任意键触发，而如果按住不放的话，会反复的触发此事件。
onkeypress：当用户按下键盘上的字符键触发，而如果按下不放的话，会反复的触发此事件。
onkeyup：当用户释放键盘上的按键时触发。
注意：
1、如何判断用户按了那个按键？
event对象提供了keyCode属性，当用户按哪个按键，可以获得该对象的对应的键码值，从而进行判断。
当要判断是第几次按这个键子时，可以用一个全局变量自己进行控制。
2、注意使用setIntervel（）；和clearInterval（）；方法。
当点击某个键子，进行指定周期的跳转，为了不返回的触及定制器，每次进入时，先对定时器进行一下清除。