jQuery 梁桐老师笔记 - ajax案例

最新推荐文章于 2024-09-16 13:10:48 发布

TammyJi

最新推荐文章于 2024-09-16 13:10:48 发布

阅读量140

点赞数

文章标签： ajax jQuery

本文链接：https://blog.csdn.net/TammyJi/article/details/89224272

版权

鼠标向下滚动时不断加载新的内容

<!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>Ajax Example 动态加载</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 1.创建10个div
    for(var i = 0; i<10;i++){
        creatDiv();
    }
    // 2. 浏览器添加滚动事件
    $(window).scroll(function(){
        // 2.1 滚过的高度
        var wt = $(this).scrollTop();
        // 2.2 整个文档的高度
        var dh = $(document).height();
        // 2.3 窗口的高度
        var wh = $(this).height();
        // 当接近底部时添加
        if( wh + wt + 50 > dh ){
            creatDiv();
        }

        // 提示
        $("#showDiv").html("wt: " + wt +",dh: " + dh + ",wh :" + wh);
    })
})
var num = 1;
function creatDiv(){
    var $div = $("<div class ='newDiv'/>");
    $div.html(num ++);
    $("body").append($div)
}
</script>
<style>
    .newDiv {
        border: 1px solid;
        width: 400px;
        height: 100px;
        font-size: 50px;
        margin: 5px;
    }
    #showDiv {
        border: 1px solid;
        width: 400px;
        height: 50px;
        font-size: 16px;
        bottom: 0px;
        right: 100px;
        position: fixed;
        background-color: brown;
    }
</style>
</head>
<body>
    <div id="showDiv"></div>
</body>
</html>

当鼠标向下时第一个div 自动加载到页面最后

<!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>Ajax Example 动态加载2</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 1.创建5个div
    for(var i = 0; i<5;i++){
        creatDiv();
    }
    // 定时器
    setInterval(showDiv,1000)
    // 2. 第一个隐藏
   function showDiv(){ $("div:first").slideUp(1000,function(){
        $(this).appendTo("body").slideDown(1000)
    })
    }
    // showDiv()   
})
var num = 1;
function creatDiv(){
    var $div = $("<div class ='newDiv'/>");
    $div.html(num ++);
    $("body").append($div)
}
</script>
<style>
    .newDiv {
        border: 1px solid;
        width: 400px;
        height: 50px;
        font-size: 50px;
        margin: 5px;
    }
</style>
</head>
<body>
</body>
</html>