onmouseover 和onmouseout的闪烁问题
#shadow{width:518px;height:50px;background:url("image/bgcolor.png");background-repeat...
#shadow{
width: 518px;
height: 50px;
background: url("image/bgcolor.png");
background-repeat: repeat-x;
position: relative;
margin-top: -27px;
}
#shadow span{
display: inline-block;
padding-top: 2px;
color: #ffffff;
}
<script>
var ht = -27;
function move() {
var obj = document.getElementById("shadow");
if (ht < 0 && ht >= -50) {
ht -= 1;
obj.style.marginTop = ht + "px";
}
}
function up(){
setInterval('move()',10);
}
function old() {
var obj = document.getElementById("shadow");
obj.style.marginTop = "-27px";
ht = -27;
}
</script>
<div id="updateInformation">
<div class="details" onmouseout="old()" >
<img src="image/card-1.png" />
<div id="shadow" onmouseover="up()" >
<span> Free!-Eternal Summer-</span>
<span style="float: right">第08话，极影字幕组 </span>
</div>
</div>
<div class="details"><img src="image/card-2.png" /></div>
<div class="details"><img src="image/card-3.png" /></div>
<div class="details"><img src="image/card-3.png" /></div>
</div>
当shadow更改弹出的时候 第一个onmouseover 和 onmouseout是正常的，但是鼠标一开 黑框缩成margin-top=-27px一瞬间 又变成-51.然后鼠标移入移开 都一直闪烁。 求解决
..求大大们 解答下啊。。 展开
width: 518px;
height: 50px;
background: url("image/bgcolor.png");
background-repeat: repeat-x;
position: relative;
margin-top: -27px;
}
#shadow span{
display: inline-block;
padding-top: 2px;
color: #ffffff;
}
<script>
var ht = -27;
function move() {
var obj = document.getElementById("shadow");
if (ht < 0 && ht >= -50) {
ht -= 1;
obj.style.marginTop = ht + "px";
}
}
function up(){
setInterval('move()',10);
}
function old() {
var obj = document.getElementById("shadow");
obj.style.marginTop = "-27px";
ht = -27;
}
</script>
<div id="updateInformation">
<div class="details" onmouseout="old()" >
<img src="image/card-1.png" />
<div id="shadow" onmouseover="up()" >
<span> Free!-Eternal Summer-</span>
<span style="float: right">第08话，极影字幕组 </span>
</div>
</div>
<div class="details"><img src="image/card-2.png" /></div>
<div class="details"><img src="image/card-3.png" /></div>
<div class="details"><img src="image/card-3.png" /></div>
</div>
当shadow更改弹出的时候 第一个onmouseover 和 onmouseout是正常的，但是鼠标一开 黑框缩成margin-top=-27px一瞬间 又变成-51.然后鼠标移入移开 都一直闪烁。 求解决
..求大大们 解答下啊。。 展开
展开全部
在onmouseover时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.toElement)){MouseOutFunc()}
下面来解释一下上面两行代码的含义：
在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那就忽略这个事件。
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是：
○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；
○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；
这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
但问题又来了，非IE的浏览器并不支持contains函数，不过既然已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：
if(typeof(HTMLElement) != "undefined")
{
HTMLElement.prototype.contains = function(obj)
{
while(obj != null && typeof(obj.tagName) != "undefind")
{
if(obj == this)
Return true;
Obj = obj.parentNode;
}
return false;
};
}
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout时先进行如下判断，结果为true时再执行方法体：
if(!this.contains(event.toElement)){MouseOutFunc()}
下面来解释一下上面两行代码的含义：
在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那就忽略这个事件。
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是：
○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；
○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；
这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
但问题又来了，非IE的浏览器并不支持contains函数，不过既然已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：
if(typeof(HTMLElement) != "undefined")
{
HTMLElement.prototype.contains = function(obj)
{
while(obj != null && typeof(obj.tagName) != "undefind")
{
if(obj == this)
Return true;
Obj = obj.parentNode;
}
return false;
};
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jQuery可以很好的实现你想要的这种效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
#shadow{
width: 518px;
height: 100px;
background: #abc;
position: relative;
margin-top: -27px;
}
#shadow span{
display: inline-block;
padding-top: 2px;
color: #ffffff;
}
</style>
<script>
function move() {
$("#shadow").animate({marginTop:"0px"});
}
function old() {
$("#shadow").animate({marginTop:"-27px"});
}
</script>
</head>
<body>
<div id="updateInformation">
<div id="shadow" onmouseover="move()" onmouseout="old()">
<span> Free!-Eternal Summer-</span>
<span style="float: left">第08话，极影字幕组 </span>
</div>
<div class="details"><img src="images/1.jpg" /></div>
<div class="details"><img src="images/2.jpg" /></div>
<div class="details"><img src="images/3.jpg" /></div>
</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
