JS模拟百度分享侧边栏效果

最新推荐文章于 2021-10-25 20:40:32 发布

原创

最新推荐文章于 2021-10-25 20:40:32 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

cnblog博客：https://www.cnblogs.com/f6056/

文章标签：

#百度分享

这篇博客介绍了如何使用JavaScript模拟百度分享的侧边栏弹出和滑入效果。当鼠标悬停在#div1上，侧边栏会平滑展开，离开时则平滑收起。如果在未完全展开或收起时鼠标离开，侧边栏会相应地开始收起或展开。作者提供了参考代码，并在cnblogs上分享了代码精简版。

模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#div1分享侧边栏，#div1分享侧边栏区块匀速滑出直至其全部露出。当鼠标移除#div1分享侧边栏，#div1分享侧边栏区块匀速滑入隐藏，直至恢复初始位置。若#div1区块未全部露出时，鼠标移出，#div1区块则开始滑入隐藏；若#div1区块未全部滑入隐藏，鼠标移入，则div1区块则开始匀速弹出。

示例图片

<!DOCTYPE html>
<html>

<head>
    <title>JS运动框架案例：类百度分享制作</title>
    <meta charset="UTF-8">
</head>
<style>
    #div1 {
        width: 150px;
        height: 200px;
        background: green;
        position: absolute;
        left: -150px;
        top: calc(50% - 100px);
    }

    #div1 span {
        width: 20px;
        height: 60px;
        line-height: 20px;
        right: -20px;
        top: 70px;
        background: blue;
        position: absolute;

    }

    html,
    body {
        margin: 0;
        padding: 0;
    }
</style>
<