html
拖动
帐 号：
密 码：
状态
下
在线
-----------------------------------------------分割线---------------------------------------------
整个js：
window.onload=drag;
function drag(){//实现拖拽的函数
var title=document.getElementsByClassName("loginPanel")[0];//取出框的元素
title.onmousedown=follow;
//松开不跟随
document.onmouseup=function(){
document.onmousemove=null;document.onmousemup=null;
}
//关闭
oClose=document.getElementById("ui_boxyClose");
oClose.onclick=function(){
loginPanel.style.display="none";
}
//切换状态
var loginState=document.getElementById("loginState"),
loginStatePanel=document.getElementById("loginStatePanel"),
state=document.getElementsByClassName("statePanel_li");
loginState.onclick=function(){
loginStatePanel.style.display="block";
}
-------------------------------------提示线---------------------------这里是问题重点-----------------------
//鼠标滑过后有阴影 /*这里不报错，但是也不能实现鼠标滑过列表时有阴影！！！！！*/
for (var i = 0; i < state.length; i++) {
state.onmouseover=function(){
this.style.backgroud="#567";}
state.onmouseout=function(){
this.style.backgroud="#FFF";}
}
----------------------------提示线-----------------问题代码结束--------------------------------------------------------
}
//让鼠标按下后可以拖动
function follow(event){
var loginPanel=document.getElementsByClassName("loginPanel")[0];
//获开边框和鼠标按下位置的差
var l=event.clientX-loginPanel.offsetLeft,
t=event.clientY-loginPanel.offsetTop,
MaxW=document.documentElement.clientWidth-loginPanel.offsetWidth+10,
MaxH=document.documentElement.clientHeight-loginPanel.offsetHeight;
//使box跟随鼠标移动
document.onmousemove=function(event){
pox=event.clientX-l;
poy=event.clientY-t;
//限制移动范围
if(poxMaxW){
pox=MaxW}
if(poyMaxH){
poy=MaxH}
//j将求出的值赋给box
loginPanel.style.left=pox+"px";
loginPanel.style.top=poy+"px";
}
} |
天盟APP下载
