<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>qq登录框</title></head><body></body></html><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>拖动</title> <link href="css/main.css" rel="stylesheet" /></head><body> <div id="loginPanel"> <div style="position: relative; z-index: 1;"> <div id="ui_boxyClose"></div> </div> <div></div> <div> <div><span>帐 号：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div> <div><span>密 码：</span><span><input name="p" id="p" maxlength="16" type="password" tabindex="2" /></span></div> </div> <div> <div 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>下</div> <div id="login2qq_state_txt">在线</div> <ul id="loginStatePanel" class="statePanel login-state" style="display: none"> <li id="online"> <div class="stateSelect_icon online"></div> <div>我在线上</div> </li> <li id="callme"> <div class="stateSelect_icon callme"></div> <div>Q我吧</div> </li> <li id="away"> <div class="stateSelect_icon away"></div> <div>离开</div> </li> <li id="busy"> <div class="stateSelect_icon busy"></div> <div>忙碌</div> </li> <li id="silent"> <div class="stateSelect_icon silent"></div> <div>请勿打扰</div> </li> <li id="hidden"> <div class="stateSelect_icon hidden"></div> <div>隐身</div> </li> </ul> </div> </div> </div> </div></body><script>window.onload = function() { var loginPanel = document.getElementById('loginPanel'); var login_logo_webqq = document.getElementById('login_logo_webqq'); var loginStateShow = document.getElementById('loginStateShow'); var loginStatePanel = document.getElementById('loginStatePanel'); var login2qq_state_txt = document.getElementById('login2qq_state_txt'); var ui_boxyClose = document.getElementById('ui_boxyClose'); var li = loginStatePanel.getElementsByTagName('li'); addHandler(loginState, 'click', function(event) { elementShow(loginStatePanel); preventBubble(event); }); //显示ul for (var i = 0; i < li.length; i++) { //hover效果 addHandler(li[i], 'mouseover', function() { overChangeBackground(this); }); //鼠标移入背景色改变 addHandler(li[i], 'mouseout', function() { outChangeBackground(this) //注意这边的this }); //鼠标移出背景色改变 addHandler(li[i], 'click', function(event) { var event = event || window.event; elementHide(loginStatePanel); preventBubble(event); var liId = this.id; var thisDom = document.getElementById(liId); loginStateShow.className = 'login-state-show ' + liId; login2qq_state_txt.innerHTML = getClass('stateSelect_text', thisDom)[0].innerHTML; }); //鼠标移出背景色改变 } addHandler(document, 'click', function() { elementHide(loginStatePanel); }); //点击文档其他地方隐藏ul addHandler(ui_boxyClose, 'click', function() { elementHide(loginPanel); }); //点击删除按钮隐藏登录框 // 登录面板拖拽 var dragArea = getClass('login_logo_webqq', loginPanel)[0] dragArea.onmousedown = function(event) { var event = event || window.event; // 鼠标按下时，鼠标离登录框的距离 var nowX = event.clientX - loginPanel.offsetLeft; var nowkY = event.clientY - loginPanel.offsetTop; document.onmousemove = function(event) { //注意document var event = event || window.event; var clickX = event.clientX - nowX; var clickY = event.clientY - nowkY; var winX = document.documentElement.clientWidth || document.body.clientWidth; var winY = document.documentElement.clientHeight || document.body.clientHeight; var maxX = winX - loginPanel.offsetWidth; var maxY = winY - loginPanel.offsetHeight; //当登录框边缘超出文档显示区域，限制超出 if(clickX<0){ clickX = 0; }else if(clickX>maxX){ clickX = maxX; } if(clickY<0){ clickY = 0; }else if(clickY>maxY){ clickY = maxY; } loginPanel.style.left = clickX + 'px'; loginPanel.style.top = clickY + 'px'; } } //点击登录框顶部拖拽区域进行拖拽移动 dragArea.onmouseup = function() { document.onmousemove = null; }}function getClass(className, parent) { var childs = parent.getElementsByTagName('*'); var classNameArr = []; for (var i = 0; i < childs.length; i++) { if (childs[i].className == className) { classNameArr.push(childs[i]); } } return classNameArr;}function overChangeBackground(element) { element.style.backgroundColor = '#ccc';}function outChangeBackground(element) { element.style.backgroundColor = '#fff';}function elementShow(element) { element.style.display = 'block';} //显示function elementHide(element) { element.style.display = 'none';} //隐藏// 阻止事件冒泡function preventBubble(event) { var event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; }}// 添加事件function addHandler(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false) } else if (element.attachEvent) { element.attachEvent('on' + type, handler) } else { element['on' + type] = handler; }}</script></html>
添加回答
举报
0/150
提交
取消