jQuery侧边栏小广告效果代码

最新推荐文章于 2021-06-11 17:46:47 发布

HaushoLin

最新推荐文章于 2021-06-11 17:46:47 发布

阅读量530

点赞数 1

分类专栏： JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/Steven_Son/article/details/107687680

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

// 这是基本样式
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 200px;
        height: 40px;
        /* background-color: greenyellow; */
        position: absolute;
        right: 0;
        bottom: 100px;
        overflow: hidden;
    }

    .box1 {
        position: absolute;
        top: 0;
        left: 200px;
        width: 200px;
        height: 40px;
        background-color: hotpink;
        text-align: center;
        line-height: 40px;
        z-index: 100;
    }

    .box2 {
        width: 50px;
        height: 40px;
        background-color: orange;
        position: absolute;
        top: 0;
        left: 150px;
        text-align: center;
        line-height: 40px;
    }
    <body>  
    <div class="box">
        <div class="box1">联系QQ : 1303574731</div>
        <div class="box2">广告</div>
    </div>
    <script src="../../jquery-1.8.3/jquery.min.js"></script>
    // js代码
    <script>
        $(function () {
            // 给盒子添加鼠标经过事件
            $('.box').mouseenter(function () {
                // 经过之后给盒子添加动画  让它left值走到0  用时0.6秒 
                $('.box1').stop().animate({ left: '0' }, 600);
            })
            // 离开事件  离开之后让它回到原来的位置   也就是绝对定位在页面外的位置(初始位置)
            $('.box').mouseleave(function () {
                $('.box1').stop().animate({ left: '200px' }, 600);
            })
        })
    </script>
</body>