基于jQuery滚动加载页面内容效果的插件封装

废话不多说直接上代码

(function () {
            var scrollShow = function () {
                this.$container = $("body");
                if(this.$container.find(".scrollShow").length){
                    this.$scrollShow = this.$container.find(".scrollShow");
                }
                this.init();
            };
            var p = scrollShow.prototype;
            p.init = function () {
                this.initHidden();
                this.initScroll();

                $(window).trigger("scroll");
            };
            //显示隐藏
            p.initHidden = function(){
                console.log("sfahjjhj");
                this.$container.find(".scrollShow").each(function() {
                    $(this).parent().css("overflow", "hidden");
                    $(this).data("show", false).css("opacity", 0.5);
                    if ($(this).css("position") === "static") {
                        $(this).css("position", "relative");
                    }
                    var t = $(this).css("top") === "auto" ? 0 : parseInt($(this).css("top"));
                    var top = $(this).height() > 400 ? $(this).height() / 2 : 400;
                    //将元素top值增加
                    $(this).data({"top": t, "height": top}).css({"top": t + top});
                })
            };
            //滚动加载
            p.initScroll = function () {
                var dom =this;
                $(window).scroll(function(){
                    var delayIndex = 0;//延迟的时间
                    //元素的内部高度（包括padding填充）
                    var secHeight = $(this).innerHeight();//窗口的内部高度
                    var TopMax = $(this).scrollTop() + secHeight;
                    var TopMin = $(this).scrollTop() - secHeight;

                    dom.$container.find(".scrollShow").each(function(){
                        var height = $(this).data("height");
                        //相对于文档的偏移距离
                        var top = $(this).offset().top - height;//将元素top值减小
                        if( top <= TopMax && top >= TopMin && !$(this).data("show")){
                            var $doc = $(this);
                            $doc.data("show",true);
                            $doc.delay(delayIndex).animate({
                                "top": $doc.data("top"),
                                "opacity": 1
                            },500);
                            delayIndex += 500;
                        }
                    })
                })
            };
            window.scrollShow = scrollShow;
        })();

　　调用方式

需要特效的元素加指定的选择器 scrollShow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollShow</title>

    <style>
        .imgBox{
             800px;
            height: 400px;
            background: #59b0dd;
            margin: 0 auto 30px;
        }
        .imgBox img{
             700px;
            height: 300px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="imgBox "><img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt=""></div>
        <div class="imgBox scrollShow">今晚的月亮好圆呀，就想你的脸</br>今晚的月亮好圆呀，就想你的脸</br>今晚的月亮好圆呀，就想你的脸</br>今晚的月亮好圆呀，就想你的脸</br></div>
        <div class="imgBox scrollShow"><img src="http://img.zcool.cn/community/0167ec5770fb3e0000012e7eb23909.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
        <div class="imgBox scrollShow"><img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt=""></div>
    </div>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
$(document).ready(function () {
            //创建scrollShow实例即可
            var show = new scrollShow();
        })
    </script>
</body>
</html>

基于jQuery滚动加载页面内容效果的插件封装

相关推荐