这是我从老师哪里下载下来的js代码,当然我删除了一部分,老师讲解到我这里时,能够实现对状态的下拉列表,而我的却实现不了。。
//方法封装
function getByClass(claName,parent){
var oParent=parent?document.getElementById(parent):document,
eles=[],
elements=oParent.getElementsByTagName("*");
for(var i=0,l=elements.length;i<l;i++){
if(elements[i].className==claName){
eles.push(elements[i]);
}
}
return eles;
}
//页面加载
window.onload=link;
function link(){
var oTitle=getByClass("login_logo_webqq","loginPanel")[0];
//拖曳
oTitle.onmousedown=fnDown;
//关闭
var oClose=document.getElementById("ui_boxyClose");
oClose.onclick=function(){
document.getElementById("loginPanel").style.display="none";
}
//切换状态
var loginState=document.getElementById("loginState"),
stateList=document.getElementById("loginStatePanel"),
lis=stateList.getElementsTagName("li"),
stateTxt=document.getElementById("login2qq_state_txt"),
q=document.getElementById("loginStateShow");
loginState.onclick=function(){
stateList.style.display="block";
//鼠标划过、离开和点击状态列表时
for(var i=0,l=lis.length;i<l;i++){
lis[i].onmouseover=function(){
this.style.background="#567";
}
}
}
}
function fnDown(){
var oDrag=document.getElementById("loginPanel");
/*这里有一个bug,松开光标时,光标出现在面板右上角,所以不这样去写
* document.onmousemove=function(event){
event=event||window.event;
//document.title=event.clientX+","+event.clientY;
oDrag.style.left=event.clientX+"px";
oDrag.style.top=event.clientY+"px";
}*/
event=event||window.event;
//光标按下时,光标与面板之间的距离
var 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"),
w=e.clientX-posX,
h=e.clientY-posY,
winW=document.documentElement.clientWidth||document.body.clientWidth,
winH=document.documentElement.clientHeight||document.body.clientHeight,
maxW=winW-oDrag.offsetWidth-10,//这里10px为X按钮的大小
maxH=winH-oDrag.offsetHeight;
if(w<0){
w=0;
}else if(w>maxW){
w=maxW;
}
if(h<0){
h=10;
}else if(h>maxH){
h=maxH;
}
oDrag.style.left=w+"px";
oDrag.style.top=h+"px";
//document.title=w;
}