html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>拖动</title> <link href="css/main.css" rel="stylesheet" /> <script src="js/drag1.js"></script></head><body> <div class="loginPanel" id="loginPanel"> <div style="position: relative; z-index: 1;"> <div class="ui_boxyClose" id="ui_boxyClose"></div> </div> <div class="login_logo_webqq"></div> <div class="inputs"> <div class="sign-input"><span>帐 号：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div> <div class="sign-input"><span>密 码：</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div> </div> <div class="bottomDiv"> <div class="btn" style="float: left"></div> <div> <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态"> <div id="loginStateShow" class="login-state-show online">状态</div> <div class="login-state-down">下</div> <div class="login-state-txt" id="login2qq_state_txt">在线</div> <ul id="loginStatePanel" class="statePanel login-state" style="display: none"> <li id="online" class="statePanel_li"> <div class="stateSelect_icon online"></div> <div class="stateSelect_text">我在线上</div> </li> <li id="callme" class="statePanel_li"> <div class="stateSelect_icon callme"></div> <div class="stateSelect_text">Q我吧</div> </li> <li id="away" class="statePanel_li"> <div class="stateSelect_icon away"></div> <div class="stateSelect_text">离开</div> </li> <li id="busy" class="statePanel_li"> <div class="stateSelect_icon busy"></div> <div class="stateSelect_text">忙碌</div> </li> <li id="silent" class="statePanel_li"> <div class="stateSelect_icon silent"></div> <div class="stateSelect_text">请勿打扰</div> </li> <li id="hidden" class="statePanel_li"> <div class="stateSelect_icon hidden"></div> <div class="stateSelect_text">隐身</div> </li> </ul> </div> </div> </div> </div></body></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[i].onmouseover=function(){ this.style.backgroud="#567";} state[i].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(pox<0){ pox=0;}else if(pox>MaxW){ pox=MaxW}if(poy<0){ poy=10;}else if(poy>MaxH){ poy=MaxH}//j将求出的值赋给boxloginPanel.style.left=pox+"px";loginPanel.style.top=poy+"px"; }}
添加回答
举报
0/150
提交
取消