js和css写一个可以自动隐藏的悬浮框

首先，需要明确要实现的效果：在页面中添加一个悬浮框，可以自动隐藏，当鼠标放到悬浮框上时会自动显示，鼠标移开悬浮框后，悬浮框会自动隐藏。

实现这个功能需要用到JavaScript和CSS，具体步骤如下：

HTML部分

首先在HTML文件中添加悬浮框的代码，通常可以使用div标签来创建悬浮框，然后给它一个特殊的class或id属性以用于JavaScript和CSS中的操作。示例如下：

<div class="suspension-box">
    <!--这里是悬浮框的内容-->
</div>

CSS部分

接下来我们来设置CSS样式，需要定义悬浮框的基本样式和鼠标放上去时的样式。通常可以使用position和z-index来控制元素的位置和层级，并使用display来控制元素的显示和隐藏。示例如下：

.suspension-box {
    position: fixed;  /*设置固定位置*/
    right: 20px;  /*离浏览器边缘的距离*/
    bottom: 20px;
    z-index: 9999;  /*设置层级*/
    background-color: #fff;  /*设置背景色*/
    border: 1px solid #000;  /*设置边框*/
    display: none;  /*默认隐藏*/
}

.suspension-box:hover {
    display: block;  /*鼠标放上去时显示*/
}

JavaScript部分

最后我们来编写JavaScript代码，通过监听页面滚动事件和鼠标移动事件来实现悬浮框的自动隐藏和显示。其中可以使用HTMLElement.style来设置元素的CSS样式，使用window.scrollTop来获取当前页面滚动的距离。示例如下：

window.onscroll = function() {
    var box = document.querySelector('.suspension-box');
    if (window.scrollTop > 100) {
        box.style.display = 'block';
    } else {
        box.style.display = 'none';
    }
};

var box = document.querySelector('.suspension-box');
box.onmouseover = function() {
    box.style.display = 'block';
};

box.onmouseout = function() {
    if (window.scrollTop > 100) {
        box.style.display = 'none';
    }
};

以上就是实现一个自动隐藏的悬浮框的完整攻略。通过HTML定义悬浮框的基本的结构和CSS设置样式，通过JavaScript监听页面滚动和鼠标移动事件来控制悬浮框的显示和隐藏。具体的效果可以通过修改CSS和JavaScript代码的方式来实现不同的变化。

以下是两个示例：

示例一：改变移动鼠标时显示悬浮框的效果

修改CSS代码为：

.suspension-box:hover, .suspension-box.on {
    display: block;
}

然后修改JavaScript代码为：

var box = document.querySelector('.suspension-box');
box.onmouseover = function() {
    box.classList.add('on');
};

box.onmouseout = function() {
    if (window.scrollTop > 100) {
        box.classList.remove('on');
    }
};

这样的话，当鼠标放到悬浮框上时，悬浮框就会一直显示了。

示例二：改变悬浮框的动画效果

修改CSS代码为：

.suspension-box {
    /*原有的代码*/
    transition: all 0.5s ease-in-out;  /*添加过渡效果*/
}

然后把JavaScript代码修改为：

var box = document.querySelector('.suspension-box');
box.onmouseover = function() {
    box.style.opacity = 1;  /*添加透明度的渐变效果*/
};

box.onmouseout = function() {
    if (window.scrollTop > 100) {
        box.style.opacity = 0;
    }
};

这样就可以实现悬浮框的渐变效果了。

阅读剩余 58%