为什么ie8上鼠标移入移出没效果
<!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>
qq_溜溜球_01回答
-
idiot0
有可能是浏览器的兼容问题，你换换其他浏览器试试
随时随地看视频慕课网APP
相关分类
JavaScript