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="选择在线状态"> <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 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() { //实现拖拽的函数 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"), 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";----------------------------------------------这里错误的分割线------------------------------//切换状态文字 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"; }}--------------------------------------提问的分割线------------------------------------------------是这样的我想在点击状态栏的时候可以实现文字变换但是不知道怎么取出class组中的文字
添加回答
举报
0/150
提交
取消