教大家做一个jQuery内涵段子Ajax的应用，可以打包成App，功能强大

最新推荐文章于 2022-02-08 19:34:40 发布

nihaishilaile

最新推荐文章于 2022-02-08 19:34:40 发布

阅读量215

点赞数

分类专栏： jQuery 文章标签： jQuery Ajax 弹性布局教学原创

本文链接：https://blog.csdn.net/nihaishilaile/article/details/103076491

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍如何利用jQuery的Ajax技术制作一个内涵段子应用，涵盖页面切换、刷新和跳转等功能，结合html和css的定位及弹性布局，适合初学者学习。

摘要由CSDN通过智能技术生成

Ajax应用于内涵段子视频

1、首先，运用到了Ajaax，这需要我们对Ajax有一些的了解，原理比较简单，这里我们利用jQuery来实现这个内涵段子的各种功能。
2、html和css比较简单，都是用到了定位以及弹性布局等等，具体的功能可以页面切换、刷新、跳转等功能，有兴趣的同学可以看一下
3、话不多说，代码如下


***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>猪仔视频</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/mui.min.css">
</head>

<body>
    <div class="btnList">
        <div class="btn">段子</div>
        <div class="btn">图片</div>
        <div class="btn">视频</div>
    </div>
    <div class="contentList">
        <div class="content active"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>

    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/index.js"></script>
    <script>
    </script>
</body>

</html>

*js代码：*


$(function() {
    $('.btn').click(function() {
        var index = $(this).index()
            //fadeOut() 方法使用淡出效果来隐藏被选元素,就是此前的元素背隐藏了
            //fadeIn() 方法使用淡入效果来显示被选元素，就是把点击当前的元素显示出来
        $('.content').fadeOut(300).eq(index).fadeIn(300);
    })
    var page
    var count

    var httpUrl = "https://api.apiopen.top/getJoke"

    var options1 = {
        page: 1,
        count: 10,
        type: "text"
    }
    var options2 = {
        page: 1,
        count: 10,
        type: "image"
    }
    var options3 = {
        page: 1,
        count: 10,
        type: "video"
    }

    function text() {
        //请求段子
        $.get(httpUrl, options1).then(function(res) {
            console.log(res)
            res.result.forEach(function(item, i) {
                //console.log(item)
                var html = `
            <div class="mui-card">
            <div class="mui-card-header mui-card-media">
                <img src="${item.header}">
                <div class="mui-media-body">
                    ${item.name}
                    <p>发表于 ${item.passtime}</p>
                </div>
                
            </div>
            <div class="mui-card-content">
                <p>${item.text}</p>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link">喜欢</a>
                <a class="mui-card-link">评论</a>
            </div>
        </div>
            `
                $(".content:eq(0)").append(html).css("backgroundImage", "none")
            })
            $(".content:eq(0)").append("<div class='textshuaxin'>刷新</div>")

            //在内部绑定事件，在外面绑定不生效
            $(".textshuaxin").click(function(e) {
                $(".content:eq(0)").html("")
                options1.page++
                    text()
            })
        })
    }


    function image() {
        //请求图片

        $.get(httpUrl, options2).then(function(res) {
            console.log(res)
            res.result.forEach(function(item, i) {
                var html = `
            <div class="mui-card">
            <div class="mui-card-header mui-card-media">
                <img src="${item.header}">
                <div class="mui-media-body">
                    ${item.name}
                    <p>发表于 ${item.passtime}</p>
                </div>
                
            </div>
            <div class="mui-card-content">
                <img src="${item.images}" alt="" width="100%">
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link">Like</a>
                <a class="mui-card-link">Comment</a>
                <a class="mui-card-link">Read more</a>
            </div>
        </div>
        `

                $(".content:eq(1)").append(html).css("backgroundImage", "none")
            })
            $(".content:eq(1)").append("<div class='imageshuaxin'>刷新</div>")

            //在内部绑定事件，在外面绑定不生效
            $(".imageshuaxin").click(function(e) {
                $(".content:eq(1)").html("")
                options2.page++
                    image()
            })
        })

    }

    function video() {
        //请求视频
        $.get(httpUrl, options3).then(function(res) {
            console.log(res)
            res.result.forEach(function(item, i) {
                var html = `
            <div class="mui-card">
				<div class="mui-card-header mui-card-media">
					<img src="${item.header}">
					<div class="mui-media-body">
						${item.name}
						<p>发表于 ${item.passtime}</p>
					</div>
					
				</div>
				<div class="mui-card-content">
					<img src="${item.thumbnail}" width="100%">
					<div class="playbtn" data-index="${i}" data-video="${item.video}"></div>
				</div>
				<div class="mui-card-footer">
					<a class="mui-card-link">Like</a>
					<a class="mui-card-link">Comment</a>
					<a class="mui-card-link">Read more</a>
				</div>
			</div>
            `
                $(".content:eq(2)").append(html).css("backgroundImage", "none")
            })
            $(".content:eq(2)").append("<div class='videoshuaxin'>刷新</div>")

            //在内部绑定事件，在外面绑定不生效
            $(".videoshuaxin").click(function(e) {
                $(".content:eq(2)").html("")
                $("html").animate({
                    scrollTop: 200
                }, 1000)
                options3.page++
                    video()
            })

            $(".playbtn").click(function(e) {
                var index = $(this).index("data-index")
                var video = $(this).attr("data-video")

                $("body").append(`
                <div class="alert">
                <div class="head">
                    <div class="close">X</div>
                </div>
                <div class="main">
                    <video src="${video}" controls="controls" autoplay="autoplay"></video>
                </div>
            </div>
            `)

                $(".close").click(function(e) {
                    $(".alert").remove()
                })
            })
        })
    }
    text();
    image();
    video();

})
有什么问题可以留言一起讨论喔

nihaishilaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
教大家做一个jQuery内涵段子Ajax的应用，可以打包成App，功能强大

Ajax应用于内涵段子视频1、首先，运用到了Ajaax，这需要我们对Ajax有一些的了解，原理比较简单，这里我们利用jQuery来实现这个内涵段子的各种功能。2、html和css比较简单，都是用到了定位以及弹性布局等等，具体的功能可以页面切换、刷新、跳转等功能，有兴趣的同学可以看一下3、话不多说，代码如下***html代码:***<!DOCTYPE html><ht...
复制链接

扫一扫

专栏目录