                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS/jQuery宽高的理解和应用

jquery可视区域加载测试

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    #showDiv{
        width: 500px;
        height: 350px;
        margin: 1000px auto 0 auto;
        background-color: #F00;
    }
    
    @keyframes fadeInLeft{
        0% {
            opacity: 0;
            transform: translate3d(-100%,0,0);
        }
        
        100% {
            opacity: 1;
            transform: translate3d(0,0,0);
        }
    }
    
    .fadeInLeft{
        animation: fadeInLeft 2s;
    }
</style>
</head>
<body>
    <div id="showDiv"></div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(window).scroll(function () {
        if ($(window).height() + $(window).scrollTop() >= $("#showDiv").offset().top) {
            $("#showDiv").addClass("fadeInLeft")
        }
    
        if ($(window).scrollTop() === 0) {
            $("#showDiv").removeClass("fadeInLeft")
        }
    })
</script>
</body>
</html>