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.onmouseover = function() {
this.style.background = "#567";
}
state.onmouseout = function() {
this.style.background = "#FFF";
}
state.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组中的文字 |
天盟APP下载
