做一个jQuery内涵段子Ajax的应用，可以打包成App，功能强大"/>
教大家做一个jQuery内涵段子Ajax的应用，可以打包成App，功能强大
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 pagevar countvar httpUrl = "/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();})
有什么问题可以留言一起讨论喔
更多推荐
教大家做一个jQuery内涵段子Ajax的应用,可以打包成App,功能强大
发布评论