jquery 上拉翻页代码 ScrollPagination

在index.html 中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ScrollPagination</title>
<script type="text/javascript"  src="../frame/jqueryscrollpagination/scripts/jquery.js"></script>
<script type="text/javascript"  src="../frame/jqueryscrollpagination/s.js"></script>
<link  href="../frame/jqueryscrollpagination/main.css" rel="stylesheet" media="screen" />
<meta name="author" content="Anderson Ferminiano" />
<meta name="keywords" content="jquery, plugin, anderson ferminiano, scroll, pagination, scroll pagination, html5" /> 
<script type="text/javascript">
$(function(){
$('#content').scrollPagination({
'contentPage': 'index1.php', // 在这个页面中编写需要输出的内容
'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});

// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
  
});
</script>
</head>
<body>
<div id="scrollpaginationdemo">
    <div class="about">
        <h1>jQuery ScrollPagination - <a href="http://www.twitter.com/andferminiano" target="_blank">@andferminiano</a></h1>
        <p>Official post in my <a href="http://www.andersonferminiano.com/blog/2012/07/jquery-scroll-pagination/" target="_blank">blog</a></p>
        <p>jQuery ScrollPagination plugin has been developed by <a href="http://www.andersonferminiano.com" target="_blank">Anderson Ferminiano</a> for studying purposes, you may use it for free in any project you want, please maintain the credits.</p>


    </div>
     <div class="about">
    <h1>Sources</h1>
        <p><a href="https://github.com/andferminiano/jquery-scroll-pagination" target="_blank">Github me!</a></p>
        <p>Click <a href="jqueryscrollpagination.zip" target="_blank">here</a> to download the full source with demo (.zip format).</p>
    </div>
    <div class="about">
    <h1>Example</h1>
        <textarea readonly="readonly">
    $(function(){
                $('#content').scrollPagination({
                    'contentPage': 'democontent.html', // the url you are fetching the results
                    'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
                    'scrollTarget': $(window), // who gonna scroll? in this example, the full window
                    'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
                    'beforeLoad': function(){ // before load function, you can display a preloader div
                        $('#loading').fadeIn();
                    },
                    'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
                         $('#loading').fadeOut();
                         var i = 0;
                         $(elementsLoaded).fadeInWithDelay();
                         if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
                            $('#nomoreresults').fadeIn();
                            $('#content').stopScrollPagination();
                         }
                    }
                });


                // code for fade in element by element
                $.fn.fadeInWithDelay = function(){
                    var delay = 0;
                    return this.each(function(){
                        $(this).delay(delay).animate({opacity:1}, 200);
                        delay += 100;
                    });
                };
                       
            });
        </textarea>
    </div>
<ul id="content">
    <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
    <li><p>Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod. </p></li>
    <li><p>Phasellus vehicula turpis nec dui facilisis eget condimentum risus ullamcorper. Nunc imperdiet, tortor ultrices aliquam eleifend, nisl turpis venenatis dui, at vestibulum magna tellus in tortor. </p></li>
    <li><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus.  </p></li>
        <li><p>Aenean interdum dui vitae purus molestie nec placerat nibh semper. Maecenas ultrices elementum dapibus. Aenean feugiat, metus in mattis mattis, justo nisi dignissim libero, ac volutpat dui nibh quis metus.</p></li>
        <li><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
    </ul>
    <div class="loading" id="loading">Wait a moment... it's loading!</div>
    <div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>
</div>
</body>

</html>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值