html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>? ? <title>拖動(dòng)</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>帳 號(hào)：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ號(hào)碼或Email帳號(hào)" onFocus="if (value =='QQ號(hào)碼或Email帳號(hào)'){value =''}" onBlur="if (value ==''){value='QQ號(hào)碼或Email帳號(hào)';}" /></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="選擇在線狀態(tài)">? ? ? ? ? ? ? ? ? ? <div id="loginStateShow" class="login-state-show online">狀態(tài)</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">請(qǐng)勿打擾</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>-----------------------------------------------分割線---------------------------------------------整個(gè)js：window.onload=drag;function drag(){//實(shí)現(xiàn)拖拽的函數(shù)var title=document.getElementsByClassName("loginPanel")[0];//取出框的元素title.onmousedown=follow;//松開不跟隨document.onmouseup=function(){? document.onmousemove=null;document.onmousemup=null;}? //關(guān)閉? oClose=document.getElementById("ui_boxyClose");? oClose.onclick=function(){? ? loginPanel.style.display="none";? }?//切換狀態(tài)?var loginState=document.getElementById("loginState"),loginStatePanel=document.getElementById("loginStatePanel"),state=document.getElementsByClassName("statePanel_li");? ? ? ?loginState.onclick=function(){? ? ? ? loginStatePanel.style.display="block";? ? ? ?}-------------------------------------提示線---------------------------這里是問題重點(diǎn)-----------------------?//鼠標(biāo)滑過后有陰影 ? /*這里不報(bào)錯(cuò)，但是也不能實(shí)現(xiàn)鼠標(biāo)滑過列表時(shí)有陰影?。。。?！*/for (var i = 0; i < state.length; i++) {? state[i].onmouseover=function(){?? ? this.style.backgroud="#567";}? ?state[i].onmouseout=function(){?? ? this.style.backgroud="#FFF";} ??}----------------------------提示線-----------------問題代碼結(jié)束--------------------------------------------------------}//讓鼠標(biāo)按下后可以拖動(dòng)function follow(event){? ?var loginPanel=document.getElementsByClassName("loginPanel")[0];? ?//獲取邊框和鼠標(biāo)按下位置的差?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跟隨鼠標(biāo)移動(dòng)document.onmousemove=function(event){pox=event.clientX-l;poy=event.clientY-t;//限制移動(dòng)范圍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"; ?}}
QQ面板狀態(tài)切換 效果
慕粉3900206
2016-09-24 16:38:16
