<!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>拖動(dòng)</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>帳 號(hào)：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" tabindex="1" value="QQ號(hào)碼或Email帳號(hào)" onFocus="if (value =='QQ號(hào)碼或Email帳號(hào)'){value =''}" onBlur="if (value ==''){value='QQ號(hào)碼或Email帳號(hào)';}" /></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="選擇在線狀態(tài)">??????????????????? <div id="loginStateShow" class="login-state-show online">狀態(tài)</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>請(qǐng)勿打擾</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);??????? }); //鼠標(biāo)移入背景色改變??????? addHandler(li[i], 'mouseout', function() {??????????? outChangeBackground(this) //注意這邊的this??????? }); //鼠標(biāo)移出背景色改變??????? 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;??????? }); //鼠標(biāo)移出背景色改變??? }??? addHandler(document, 'click', function() {??????? elementHide(loginStatePanel);??? }); //點(diǎn)擊文檔其他地方隱藏ul??? addHandler(ui_boxyClose, 'click', function() {??????? elementHide(loginPanel);??? }); //點(diǎn)擊刪除按鈕隱藏登錄框??? // 登錄面板拖拽??? var dragArea = getClass('login_logo_webqq', loginPanel)[0]??? dragArea.onmousedown = function(event) {??????????? var event = event || window.event;??????????? // 鼠標(biāo)按下時(shí)，鼠標(biāo)離登錄框的距離??????????? 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;??????????????? //當(dāng)?shù)卿浛蜻吘壋鑫臋n顯示區(qū)域，限制超出??????????????? 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';??????????? }??????? } //點(diǎn)擊登錄框頂部拖拽區(qū)域進(jìn)行拖拽移動(dòng)??? 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>
為什么ie8上鼠標(biāo)移入移出沒效果
qq_溜溜球_0
2016-01-07 18:23:06
