<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>test</title> <style> *{margin: 0;padding: 0} body{position: relative;height: 100%;width: 375px;-webkit-overflow-scrolling: touch;} ul{height: 850px;overflow: hidden;overflow-y: auto;margin: 0;padding: 0;text-align: center;} li{list-style: none;text-align: center} #seemore{padding: 10px 0;text-align: center;width: 375px;position: fixed;bottom: 0;background-color: #fff;display: none;} .shadow{position: fixed;width: 375px;height: 100%;overflow: hidden;overflow-y: auto;z-index: 9;left: 0;top: 0;background-color: #fff;display: none} img{width: 100%} article{overflow-y: auto;} </style> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <ul id="data"> </ul> <div id="seemore" style="display: block;background-color: #000;color: #fff"><img src="waitting.gif" style="width: 20px" alt=""> <span id='loads'> 加载中......</span> </div> <div class="shadow"> <p class="close">返回</p> <article> </article> </div> </body> <script> var $data= $('#data'); /*----------↓--------------加载页面----------------↓-----------*/ function get(count,start,total) { $.ajax({ url:'https://api.douban.com/v2/movie/in_theaters?count='+count+'&start='+start+'&total='+total, type:'get', dataType:"JSONP", success:function (res) { $('#loads').text('加载完成...'); setTimeout(function () { $('#seemore').hide(); $('#loads').text('加载中...'); },1000); console.log(res); var tpl=''; for(var i=0;i<res.subjects.length;i++){ tpl+='<li class="li" id='+ res.subjects[i].id+'><img class="imgs" src='+ res.subjects[i].images.small +' alt=""></li>' } var tpl1='<li>' + '<p class="pps">共计:<span id="total">'+ count +'</span>条</p>' + '</li>'; $('#data').append(tpl,tpl1); } }); } get(5,0,10); /*-----------↑---------------加载页面-------------↑----------------*/ /*-----------↓------------------滚动加载更多-----------↓--------------*/ var i=1; var gd=null; $data.scroll(function(e){ var $this =$(this), viewH =$(this).height(),//可见高度 contentH =$(this).get(0).scrollHeight,//内容高度 scrollTop =$(this).scrollTop();//滚动高度 /*----↓----延迟加载更多---↓---*/ if(gd!=null){ clearInterval(gd);gd=null } gd=setTimeout(function () { console.log(e); if(scrollTop/(contentH -viewH)>=0.95){ //到达底部xxx时,加载新内容 $('#seemore').show(); i++; get(5,5*(i-1),0); } },500) /*---↑-----延迟加载更多----↑--*/ }); /*-----------↑------------------scroll&see&more-----------↑--------------*/ /*-----------↓----------------跳转至详情页-----------↓--------------*/ function getdetail(id) { $.ajax({ url:'https://api.douban.com/v2/movie/subject/'+id, type:'get', dataType:"JSONP", success:function (res) { var tpl='\ <li>\ <img src='+ res.images.large+' alt="">\ <p>影片:'+ res.title +'</p>\ <h1>故事简介</h1>\ <p style="width: 270px;display: block;margin: 0 auto">' +res.summary +'</p>\ </li>'; var tpl1='<li>' + '<p>豆瓣评分:'+ res.rating.average +' </p>' + '</li>'; var tpl2='<li>演员:</li>'; for(let i=0;i<res.casts.length;i++){ tpl2+= '<li style="display: inline-block"> <p>' + res.casts[i].name + '</p> </li> ' } var tpl3='<li id="type">影片类型:</li>'; for(let i=0;i<res.genres.length;i++){ tpl3+=' <li style="display: inline-block"> <p>' + res.genres[i] + '</p> </li> ' } $('article').html(tpl,tpl1,tpl2,tpl3); } }) }; $data.on('click','.li',function (id) { $('article').html(''); $('.shadow').show(); id=$(this)[0].id; getdetail(id) }); $('.close').click(function () { $('.shadow').hide(); }); /*-----------↑----------------跳转至详情页-----------↑--------------*/ </script> </html>
评论 (1 )
最新评论
文章怎么删掉