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"; ?}}
QQ面板狀態切換 效果
慕粉3900206
2016-09-24 16:38:16
