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

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

请叫我二狗哥

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

阅读量303

点赞数

分类专栏： Javascript 文章标签：百度分享

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

本文链接：https://blog.csdn.net/weimob258616/article/details/97397795

版权

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

摘要由CSDN通过智能技术生成

模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#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,

最低0.47元/天解锁文章

请叫我二狗哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS模拟百度分享侧边栏效果

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

扫一扫

专栏目录