87,989
社区成员
发帖
与我相关
我的任务
分享关于浮动框伸缩onmouseover和onmouseout事件问题，请教高手
我想做个能伸缩的浮动框，代码如下。当鼠标移动到div上的时候，能弹出div，移开的时候缩回去，现在有点问题，
在执行showDiv()的时候如果移开了鼠标，div就不动了，也不展开也不收缩，请问要怎么解决这个问题？
请求各位高手帮忙！先谢过了
在执行showDiv()的时候如果移开了鼠标，div就不动了，也不展开也不收缩，请问要怎么解决这个问题？
请求各位高手帮忙！先谢过了
<html>
<head>
<script>
var target = -200;
var timer;
function showDiv(){
var Obj = document.getElementById("qqbar");
if(target<0){
Obj.style.left = ++target+"px";
timer = window.setTimeout(showDiv,5);
}else{
clearTimeout(timer);
}
}
function hideDiv(){
var Obj = document.getElementById("qqbar");
if(target>-200){
Obj.style.left = --target+"px";
timer = window.setTimeout(hideDiv,5);
}else{
clearTimeout(timer);
}
}
</script>
</head>
<body>
<br/>
<br/>
<input type="button" value="浮动窗口" id="btn"/>
<div id='qqbar' style="width:210px;height=300px;background='blue';position:relative;left:-200px; "
onmouseover="showDiv();" onmouseout="hideDiv();" >
<table>
<tr>
<td>
姓名：<input type="text" id="name"><br>
密码：<input type="password" id="password">
</td>
</tr>
</table>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
lovecaih 2011-10-21
- 打赏
- 举报
晕了，就没人回复说，看来还只能靠自己。正解：使用jquery很容易就做出来：
<%@ page contentType="text/html;charset=GBK" language="java" %>
<html>
<head>
<title>浮动窗口测试</title>
<script type="text/javascript" src="/js/tools/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#boxDiv").mouseenter(function(){
$("#boxDiv").stop().animate({left:-5},500);
});
$("#boxDiv").mouseleave(function(){
$("#boxDiv").stop().animate({left:-140},500);
});
});
</script>
<style>
</style>
</head>
<body background="./images/wallpapers/4.jpg">
<br>
<div id="boxDiv"
style="width=150px;height=300px;left:-140px;background:url(./images/bg_3.png) repeat;position:relative">
<table width="100%" height="100%">
<tr>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
<%@ page contentType="text/html;charset=GBK" language="java" %>
<html>
<head>
<title>浮动窗口测试</title>
<script type="text/javascript" src="/js/tools/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#boxDiv").mouseenter(function(){
$("#boxDiv").stop().animate({left:-5},500);
});
$("#boxDiv").mouseleave(function(){
$("#boxDiv").stop().animate({left:-140},500);
});
});
</script>
<style>
</style>
</head>
<body background="./images/wallpapers/4.jpg">
<br>
<div id="boxDiv"
style="width=150px;height=300px;left:-140px;background:url(./images/bg_3.png) repeat;position:relative">
<table width="100%" height="100%">
<tr>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
