javascript 스크롤 바 스크롤 로드 내용 구현

6214 단어 JavaScript
설명: Bing 검색 이 실 현 된 이후  스크롤 로 딩 내용 을 불 러 온 후 구 글, baidu 는 모두 비슷 한 기능 을 실현 했다.
단계 1:  Visual Studio 2010 열기  ，새 항목 www. scrollpage. com.
STEP 2: HTML 파일 을 추가 합 니 다. 이름: ScrollLoadPage. html, 항목 은 Jquery 1.8.2 프레임 워 크 를 참조 합 니 다.
STEP 3: 코드 추가
<!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>

    <title>demo</title>

    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>

    <style type="text/css">

        div#Loadding { text-align: center; margin-top: 10px; display: none; font-weight: bold; color:Red; }

        div.content { width: 100%; height: 900px; border-bottom: 1px solid gray;  font-weight: bold; color:Red;text-align: center;}

    </style>

    <script type="text/javascript">

        if (!NeuF) var NeuF = {};

        NeuF.ScrollPage = function (obj, options, callback) {

            var _defaultOptions = { delay: 500, marginBottom: 100 }; //    ：    delay          marginBottom

            options = $.extend(_defaultOptions, options);

            this.isScrolling = false; //     

            this.oriPos = 0; //    

            this.curPos = 0; //    

            var me = this; //  

            var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);

            //      

            $obj.scroll(function (ev) {

                me.curPos = $obj.scrollTop();

                if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {

                    if (me.isScrolling == true) return;

                    me.isScrolling = true;

                    setTimeout(function () { me.isScrolling = false; }, options.delay);   //        

                    if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);

                };

                me.oriPos = me.curPos;

            });

        };

        $(function () {

            window.scrollTo(0, 0); //  F5        

            //marginBottom           ，0           ，          

            new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) {

                if (offset > 0) {

                    $("#Loadding").show(); //    

                    setTimeout(function () {

                        //             ，        ，        

                        $("#divContainer").append($("<div class='content'> “" + ($(".content").size() + 1) + "”   </div>"));

                        //     ，      

                        $("#Loadding").hide();

                    }, 1000);

                }

            });

        });

    </script>

</head>

<body>

    <div id="divContainer">

        <div class="content">

                 ，    ，       。         ，<br />  CSS div.content     ，         </div>

    </div>

    <div id="Loadding">

            ，    ...</div>

</body>

</html>

STEP 4: 브 라 우 저 에서 scrollLoadPage. html 보기.
다음은 프로젝트 소스 코드 를 드 립 니 다.   ：
http://files.cnblogs.com/HCCZX/www.scrollpage.com.rar
 
 
JS 논리 연산 자 및 우선 순위
너무 많은 커밋, 스쿼시!!

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage