css过渡——实现元素的飞入飞出

最新推荐文章于 2023-05-11 17:40:48 发布

weixin_30394981

最新推荐文章于 2023-05-11 17:40:48 发布

阅读量1.6k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhoushangwu/p/10774213.html

版权

<!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>Document</title>
</head>

<body style="height:2000px">
    <div style="margin-top:1000px;overflow: hidden;">
        <div id="demo" style="width: 500px;height: 300px; background-color: red;transition: all 1s; opacity: 0.1;"></div>
    </div>
</body>

</html>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>
    $(window).scroll(function (e) {
        //元素
        var demo = $("#demo");

        //滚动条滚动的高度
        var scrollTop = $(document).scrollTop();
        //浏览器可视化区域的高度
        var docHeight = $(window).height();

        //滚动最小位置，开始动画
        var mintop = demo.offset().top + demo.height() - docHeight;
        //滚动最大位置，开始动画
        var maxtop = demo.offset().top;

        //在一定范围内，开始过度动画，出了范围，就将过度动画还原为未执行时的样式
        if(mintop <= scrollTop && maxtop >= scrollTop){
            //开始动画
            demo.css({
                "opacity":1,
                "margin-left":"500px"
            })
        }
        else{
            //还原动画
            demo.css({
                "opacity":0.1,
                "margin-left":"0px"
            })
        }
    });
</script>

转载于:https://www.cnblogs.com/zhoushangwu/p/10774213.html

weixin_30394981

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css过渡——实现元素的飞入飞出

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
复制链接

扫一扫