文章 - ..... | 前端网（QDFuns）

<!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>

</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 )

最新评论

.....

评论 ( 1 )

最新评论

欢迎您回来

创建账号

找回密码