jQuery中animate与scrollTop、offset().top实例

时间：2018-08-24 14:49:45 阅读：758 评论：0 收藏：0 [点我收藏+]

标签：高度透明 scrolltop cap har 9.1 ati device ebe

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>scrollTop与offset.top、animate</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        body {
            margin: 0 auto;
            max-width: 640px;
            background-color: #fbfbfb;
            padding: 10px;
        }

        .bd {
            height: 1650px;
            overflow: hidden;
        }

        .btn_animate {
            position: absolute;
            width: 120px;
            height: 30px;
            line-height: 30px;
            background-color: rgb(129, 26, 26);
            color: #fff;
            text-align: center;
        }

        .btn_ho {
            position: absolute;
            top: 40px;
            left: 0;
            width: 120px;
            height: 30px;
            line-height: 30px;
            background-color: rebeccapurple;
            border-radius: 5px;
            color: #fff;
            text-align: center;
            margin: 10px 0;
        }

        .btn_go {
            position: absolute;
            left: 0;
            top: 90px;
            height: 30px;
            line-height: 30px;
            width: 150px;
            background-color: plum;
            border-radius: 5px;
            text-align: center;
        }

        .hide {
            position: absolute;
            top: 160px;
            left: 0;
            display: none;
            width: 100px;
            height: 30px;
            background-color: orange;
        }
        .btn_top{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: navy; border-radius: 5px; color: #fff;}
        .btn_top_r{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: rgb(11, 104, 84); border-radius: 5px; color: #fff;}
    </style>
</head>

<body>
    <div class="bd">
        <div style="height: 400px; background-color: rgb(33, 107, 172); position: relative;" id="demo">
            <div class="btn_animate" id="btnAnimate">点击向左移动</div>
            <div class="btn_ho" id="btnHo">点击切换</div>
            <div class="hide" id="hide">后显示</div>
            <div class="btn_go" id="go">点击变化</div>
        </div>
        <h2>注意：用animate效果的时候样式一定要定位</h2>
        <div style="height: 500px; background-color: rgb(34, 59, 99)" id="floor"></div>
        <div style="height: 500px; background-color: orangered"></div>
        <div class="btn_top" id="btnTop">scrollTop:top</div>
        <div class="btn_top_r" id="btnTop_r">offset().top</div>

    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 让指定元素左右移动
            $("#btnAnimate").on("click", function () {
                $(this).animate({
                    left: ‘+150px‘
                }, "slow");
            });
            //在600毫秒内切换段落的高度和透明度
            $("#btnHo").on("click", function () {
                $("#btnAnimate").animate({
                    height: ‘toggle‘,
                    opacity: ‘toggle‘
                }, "slow");
            });
            //用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
            $("#go").click(function () {
                $("#hide").animate({
                    width: "40%",
                    height: "100%",
                    fontSize: "20px",
                    left: 50,
                    opacity: ‘show‘
                }, 500);

            });
            $("#btnTop").on("click",function(){
                //html,body是兼容Firfox与Chrome
                $("html,body").animate({"scrollTop":top})
            })
            $("#btnTop_r").on("click",function(){
                $("html,body").scrollTop($("#floor").offset().top - 50)
            })

        });
    </script>
</body>

</html>

效果图：

技术分享图片

jQuery中animate与scrollTop、offset().top实例

标签：高度透明 scrolltop cap har 9.1 ati device ebe

原文地址：https://www.cnblogs.com/huanghuali/p/9529593.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行