js中怎么让窗口div慢慢移除窗口！

当鼠标悬浮在div上的时候慢慢的弹出窗口！这个已经能做到了！现在想利用同样的方法让div在鼠标移除是慢慢移除窗口！可是好像出了什么问题！求大神帮忙看看，拜托！小白求教！
代码如下：
!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}

.slider {
position: fixed;
width: 100px;
height: 200px;
right: -90px;
background-color: #ccc;
}

.slider li {
height: 35px;
line-height: 35px;
text-align: left;
padding: 6px;
}

.slider li:hover {
background-color: #d5d5d5;
}
</style>
<script>
window.onload = function() {
slider.onmouseover = function() {
var timer = setInterval(function() {
//slider.style.right = parseInt(getComputedStyle(slider).right)+5+"px";
if(parseInt(slider.style.right) >= 0) {
clearInterval(timer)
} else {
slider.style.right = parseInt(getComputedStyle(slider).right) + 1 + "px";
}
}, 20)
}
slider.onmouseout = function() {
var timer2 = setInterval(function() {
if(parseInt(slider.style.right)>=0){
slider.style.right = parseInt(getComputedStyle(slider).right)+ "-1"+"px";
}
},20)
}
}
</script>
</head>

<body>
<div id="slider" class="slider">
<ul>
<li>用户登录</li>
<li>用户注册</li>
<li>购物车</li>
<li>我的订单</li>
</ul>
</div>

</body>

</html>

举报该问题

推荐答案 2017-07-13

获取焦点事件，应该满足不了这个要求吧，试试我这个吧：首先，我们将弹出框中的内容放置在一个特殊的DIV层中，然后默认隐藏它（即初始不可见，使用CSS即可实现）。当用户执行某个动作时——比如点击某个链接或者将鼠标光标移动到某个链接上——我们将之前设置好的隐藏层显示在所有页面元素的最上层（将使用JS操作实现）。此外，我们还将在弹出DIV窗口中设置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。就如我上面提到的，我们首先需要创建一个特殊的DIV层，然后我们将弹出窗口的内容放在这个DIV层里面。在这里，我们将其ID命名为“popupcontent ”以区别于其他DIV层。下来，让我们给上面已创建好的这个DIV弹出层进行CSS美化。其中最重要的几个参数分别是：overflow（内容溢出）,和position（定位方式）。同时我也给这个窗口效果添加了很多其他代码，但这些只是用于美化，使这个窗口更绚丽。所以，我们最后定义的CSS代码形从上面CSS代码中的红色部分可以看出：这个DIV层初始默认状态是不可见的。大家可以根据需要对以上代码进行美化，但请务必保留position，visibility，overflow三个属性。这可能是本教程最重要最有趣的地方了。我们接下来会编写2个过程函数分别用于显示和隐藏上面那个DIV弹窗。当然，这两个函数之中会包含一些主体逻辑。在弹出窗口中添加一个状态栏（或按钮），用于关闭打开状态下的窗口；显示弹出窗口。为了简单起见，本例中我们设置的显示位置是Top：200，Left：200。即以浏览器内容框的左上角为坐标，向下偏移200PX，向左偏移200PX。弹出窗口的大小我们可以在显示函数的参数中进行设置，包括两个参数：窗口长度和窗口宽度。如果你需要将本例中的代码进行二次开发，有个地方需要特别注意，那就是获取弹出窗口DIV层的DOM对象，我们可以通过下面这个getElementById函数来获取ID名为“Popcontent”的DOM对象。在获取这个（弹出窗口）DOM对象之后，我们可以在JS代码中修改窗口的相对的位置和窗口大小。下来，我们需要给窗口添加一个“关闭”按钮，用于在窗口开启状态下关闭这个窗口。要完美的实现这一功能，首先我们需要声明一个全局变量，用于存储弹出窗口DIV中的内容。这是因为，如果你在一个页面中显示多个内容不同的弹出窗口，你不需要将按钮重复的复制到这些DIV层中，这样就简化了行为逻辑：最后一个需要注意的地方是这个“关闭”按钮的定位问题。这个很容易实现，设置一下这个按钮对象的向上的空白边即可（空白边的数值设置成稍小于整个弹出窗口的DIV高度即可）。至此，所有的行为逻辑讲解完毕，最后的弹窗显示函数的完整代码如下：隐藏弹出窗口的过程就相当简单了。只需要首先获取弹出窗口那个DIV的DOM对象，然后将其属性设置成“隐藏”即可。我们需要做的就是在某个链接或者按钮的对应事件上添加JS函数“showPopup() ”即可。比如，需要在鼠标移动到某连接上时弹出窗口：setTimeout("codefans()",2000);//2秒，可以改动position: fixed用于生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。这个函数中，url链接的是一个html，我试过了，显示出来的还是我的主界面。我的意思，在我的主界面中，隐藏了一个Div，我想点击一个"XXX"后，在新的窗口/对话框中显示出Div中的信息。哦吼，原来这样。那简单，将你那个隐藏DIV设置一个唯一ID，好让它能够让JS调用到。那么你这个时候，使用js调用它需要一个前提，就是要在窗口中显示出一个DIV，这个DIV你是要新生成，还是现成的，有不同的办法，如果是新生成的话：//这里你可以为这个DIV加上class什么的，以便于CSS（d.createAttribute()函数）document.body.appendChild(div);//把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后接下来，你就可以为这个DIV加入内容了：就是这样。以上我只是给出一个思路，你可以依据这个思路继续往下走，写程序千万不要全都等现成的。比如你这段程序，主要的还是需要对JS如果操作DOM节点有了解，所以多在这方面下点功夫，就OK了。不对，而是：大意了，不好意思ok 我再好好研究研究，刚接触jQuery。。。谢谢了哦

温馨提示：答案为网友推荐，仅供参考

当前网址：http://11.wendadaohang.com/zd/F77472vq427MvvFM2S7.html

其他回答

第1个回答 2017-07-13

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>
回答完毕，采纳即可
</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}

.slider {
position: fixed;
width: 100px;
height: 200px;
right: -90px;
background-color: #ccc;
border:1px solid red;
}

.slider li {
height: 35px;
line-height: 35px;
text-align: left;
padding: 6px;
cursor:pointer;
}

.slider li:hover {
background-color: #d5d5d5;
}
</style>
<script>
var interval;
window.onload = function() {
slider.onmouseenter = function(){
run(this,1);

}
slider.onmouseleave=function(){
run(this,0);
}
}
var getStyle = function(dom, prop){
return dom.style[prop] || getComputedStyle(dom)[prop];
}

var run = function(me, over){
if(!!interval) return;
interval = setInterval(function(){
var r = parseFloat(getStyle(me, "right"));
if(over)
r = r >= 0 ? 0 : r;
else
r = r <= -90 ? -90 : r;
if(r == 0 && over || !over && r == -90){
clearInterval(interval);
interval=null;
return;
}
me.style.right = r + (over?10:-10) + "px";
}, 30);
}
</script>
</head>

<body>
<div id="slider" class="slider">
<ul>
<li>
用户登录
</li>
<li>
用户注册
</li>
<li>
购物车
</li>
<li>
我的订单
</li>
</ul>
</div>

</body>

</html>

本回答被网友采纳

相似回答

用js怎么实现一个div显示时间2秒后就自动消失。答：hide()，实现隐藏这个已经显示的div。以下为使用setTimeout()设定一个函数在2秒后执行 (function () {setTimeout(function () {$("divid").hide();}, 2000);})

大家正在搜

js移除disabled属性 js移除class js移除数组中的指定元素 js移除元素某个class属性 jquery移除class属性 js移动div js 移除属性 js移除某个元素 js数组移除