html:?<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>? ? <title>拖動</title>? ? <link href="css/main.css" rel="stylesheet" /><meta charset="utf-8">? ??</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="選擇在線狀態(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 id="stateSelect_textonline">我在線上</div>? ? ? ? </li>? ? ? ? <li id="callme" class="statePanel_li">? ? ? ? ? ? <div class="stateSelect_icon callme"></div>? ? ? ? ? ? <div id="stateSelect_textcall me">Q我吧</div>? ? ? ? </li>? ? ? ? <li id="away" class="statePanel_li">? ? ? ? ? ? <div class="stateSelect_icon away"></div>? ? ? ? ? ? <div id="stateSelect_textaway">離開</div>? ? ? ? </li>? ? ? ? <li id="busy" class="statePanel_li">? ? ? ? ? ? <div class="stateSelect_icon busy"></div>? ? ? ? ? ? <div id="stateSelect_textbusy">忙碌</div>? ? ? ? </li>? ? ? ? <li id="silent" class="statePanel_li">? ? ? ? ? ? <div class="stateSelect_icon silent"></div>? ? ? ? ? ? <div id="stateSelect_textsilent">請勿打擾</div>? ? ? ? </li>? ? ? ? <li id="hidden" class="statePanel_li">? ? ? ? ? ? <div class="stateSelect_icon hidden"></div>? ? ? ? ? ? <div id="stateSelect_texthidden">隱身</div>? ? ? ? </li>? ? </ul>? ? ? ? ? ? ? ? </div>? ? ? ? ? ? </div>? ? ? ? </div>? ? </div><script src="js/drag1.js"></script></body></html>--------------------------------------------------分割線--------------------------------------------------------------js：window.onload = drag;function drag() { //實現(xiàn)拖拽的函數(shù)? 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";} ?//切換狀態(tài)? var loginState = document.getElementById("loginState"),? ? loginStatePanel = document.getElementById("loginStatePanel"),? ? state = document.getElementsByClassName("statePanel_li"),? ?? ? info = document.getElementById("loginStateShow"),? ? text = document.getElementById('login2qq_state_txt'),? ? stateSelect = document.getElementById("stateSelect_text"),? ? callme = document.getElementById("stateSelect_icon callme");? loginState.onclick = function() {? ? loginStatePanel.style.display = "block";? }? for (var i = 0; i < state.length; i++) {? ? state[i].onmouseover = function() {? ? ? this.style.background = "#567";? ? }? ? state[i].onmouseout = function() {? ? ? this.style.background = "#FFF";? ? }? ? state[i].onclick = function() {? ? ? event.stopPropagation();? ? ? loginStatePanel.style.display = "none";----------------------------------------------這里錯誤的分割線------------------------------//切換狀態(tài)文字? ? ? text.innerHtml=document.getElementById(''stateSelect_text'+this.id').innerHtml;-----------------------------------------------------------------------------------------------------//切換小圖標? ? ? info.className='login-state-show '+this.id;? ? ??? ? }? }}//讓鼠標按下后可以拖動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將求出的值賦給box? ? loginPanel.style.left = pox + "px";? ? loginPanel.style.top = poy + "px";? }}--------------------------------------提問的分割線------------------------------------------------是這樣的我想在點擊狀態(tài)欄的時候可以實現(xiàn)文字變換但是不知道怎么取出class組中的文字
QQ登陸框?qū)崿F(xiàn)狀態(tài)文字變換的問題
慕粉3900206
2016-09-26 17:04:12