js实现鼠标滑入滑出效果，怎么做？不用id

JavaScript019

js实现鼠标滑入滑出效果，怎么做？不用id,第1张

clientHeight

然后递归，直到这个高度为0，或者直到这个高度为一个指定的高度

function showBox()

{

if (sb != null){

clearTimeout(sb)

}

if (cb != null) {

clearTimeout(cb)

}

var o = $('rbbox')

o.style.display = 'block'

var H = parseInt(o.style.height)

o.style.height = (o.clientHeight + Math.ceil((55 - o.clientHeight) * 0.035)) + "px"

if (o.clientHeight <55) {

sb = setTimeout(function(){showBox()}, 2)

}

else {

cb = setTimeout(function(){closeBox()}, 3800)

return

}

}

function closeBox(msg)

{

if (cb != null) {

clearTimeout(cb)

}

var o = $('rbbox')

var dy = Math.ceil((parseInt(o.style.height) - 4) * 0.875).toString()

o.style.height = dy + "px"

if(o.clientHeight <= 5){

document.getElementById("rbbox").style.display = 'none'

return

}

cb = setTimeout(function(){closeBox()}, 3)

}

div#rbbox {

position: fixed

right: 2px

bottom: 2px

height: 0px

width: auto

overflow: hidden

border:1px #ff0000 solid

background-color: #FFCC00

text-align:justify

}

功能：使用js制作鼠标移过去会显示隐藏的内容

步骤：

1、构造好页面内容；

2、在css中设置一个隐藏类hide，类的样式为display：none；设置显示类show，样式为display：block；

3、给需要隐藏的内容设置类名为hide，这样就隐藏了控件

4、在js标签中，通过控件的类名或者id获取到隐藏对象obhide以及需要监控的对象ob2，再对ob2对象设置onmouseover方法，在这个方法中，将bohide的类名hide更换成show，这样，在鼠标进入ob2控件之中，就会显示隐藏的obhide的内容，

对ob2对象设置onmouseout方法，在这个方法中，将bohide的类名show更换成hide，这样，在鼠标离开ob2控件，就会隐藏obhide的内容，