ajax下拉加载特效

最新推荐文章于 2019-05-15 23:48:33 发布

流丶年丶

最新推荐文章于 2019-05-15 23:48:33 发布

阅读量484

点赞数 1

分类专栏： js，jq

本文链接：https://blog.csdn.net/sxmfendou/article/details/75006889

版权

js，jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"> <meta
content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"
name="viewport"/> <title>jq滚动到底部自动加载数据实例</title> <style>
html,body,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}
body,html{line-height:1;font-family:"Microsoft
YaHei",Arial,Helvetica,sans-serif;font-size:16px;color:#333;}
ol,ul{list-style:none;} a{text-decoration:none;}
body{background:#f2f2f2;} .prolist
li{height:50px;line-height:50px;border-bottom:1px solid
#f8f8f8;background:#fff;padding:0
15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.prolist li a{color:#333;font-size:16px;} /**加载效果旋转**/
@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);}50%
{-webkit-transform: rotate(180deg);}100% {-webkit-transform:
rotate(360deg);}} @keyframes rotate {0% {transform: rotate(0deg);}50%
{transform: rotate(180deg);}100% {transform: rotate(360deg);}} .loadmore
{display:block;line-height:
50px;text-align:center;color:#ccc;font-size:14px;} .loadmore
span{height:20px;width: 20px;border-radius:
100%;display:inline-block;margin:10px;border:2px solid
#f60;border-bottom-color: transparent;vertical-align:
middle;-webkit-animation: rotate 0.75s 0 linear infinite;animation:
rotate 0.75s 0 linear infinite;} .loadover{position:relative;margin:0
12px;padding:24px
0;height:20px;line-height:20px;color:#909090;text-align: center;}
.loadover span{position:relative;display:inline-block;padding:0
6px;height:20px;background:#F2F2F2;z-index:2} .loadover:after
{content:''position: absolute;left: 0;top: 50%;width: 100%;height:
1px;background: #DCDCDC;z-index: 1;} </style> </head> <body>  <ul class="prolist"> <li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
<li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
<li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
<li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
<li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
<li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
<li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
<li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
<li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
<li><a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！</b></a></li>
</ul>  <script type="text/javascript"

src="js/jquery-1.9.1.min.js"></script>

finished=0; var sover=0; //如果屏幕未到整屏自动加载下一页补满 var

setdefult=setInterval(function (){ if(sover==1)

clearInterval(setdefult);

else

if($(".prolist").height()<$(window).height()) loadmore($(window));

else

clearInterval(setdefult); },500); //加载完 function loadover(){

if(sover==1) { var overtext="Duang～到底了";

if($(".loadover").length>0) {

$(".loadover span").eq(0).html(overtext); }

else { var txt='<div

class="loadover"><span>'+overtext+'</span></div>' $("body").append(txt);

} } }

//加载更多 var vid=0; function loadmore(obj){ if(finished==0 &&

sover==0) { var scrollTop = $(obj).scrollTop(); var scrollHeight =

$(document).height(); var windowHeight = $(obj).height();

if (scrollTop

+ windowHeight -scrollHeight<=50 ) {

//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作

var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'

$("body").append(txt); //防止未加载完再次执行 finished=1; var result = '' for(var i = 0; i < 6; i++){ vid++; result+='<li>' +'<a
href="http://www.86y.org/art_detail.aspx?id=744">测试数据！'+parseInt(vid)+'</a>'
+'</li>' } setTimeout(function(){ $(".loadmore").remove();
$('.prolist').append(result); page+=1; finished=0; //最后一页 if(page==10) {

sover=1; loadover(); } },1000); /*$.ajax({ type: 'GET', url:

'json/more.json?t=25&page='+page, dataType: 'json', success:
function(data){ var result = '' for(var i = 0; i < data.lists.length;
i++){ result+='<li>' +'<a
href="'+data.lists[i].link+'">'+data.lists[i].title+parseInt(page+1)+"-"+i+'</a>'

+'</li>' }

// 为了测试，延迟1秒加载 setTimeout(function(){

$(".loadmore").remove(); $('.prolist').append(result); page+=1;

finished=0;

//最后一页 if(page==10) { sover=1; loadover(); } },1000); },

error: function(xhr, type){ alert('Ajax error!'); } });*/ } } }
//页面滚动执行事件 $(window).scroll(function (){ loadmore($(this)); });
</script> </body> </html>

流丶年丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax下拉加载特效

DOCTYPE HTML> content="text/html; charset=utf-8"> content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"name="viewport"/> jq滚动到底部自动加载数据实例 html,body,ul,l
复制链接

扫一扫