面向對象

  1. tab組件封裝
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>tab</title>
    <style>
        body {
            text-align: center;
        }
        .ct {
            display: inline-block;
        }
        .tab {
            margin-top: 20px;
        }
        .tab>.header {
            margin: 0;
            padding: 0;
            display: flex;
            width: 330px;
            list-style: none;
            border: 1px solid #ccc;
        }
        
        .tab>.header>li {
            width: 100px;
            padding: 5px;
            border-right: 1px solid #ccc;
            cursor: pointer;
        }
        .tab>.header>li.active {
            background: #ccc;
        }
        
        .tab>.header>.no-right {
            border-right: 0;
        }
        .tab>.content {
            
            text-align: left;
            margin: 0;
            padding: 0;
            list-style: none;
            border: 1px solid #ccc;
            border-top: 0;
        }
        .tab>.content>li{
            height: 100px;
            display: none;
        }
        .tab>.content>li.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="ct">
        <div class="tab">
            <ul class="header">
                <li class=active>選項1</li>
                <li>選項2</li>
                <li class="no-right">選項3</li>
            </ul>
            <ul class="content">
                <li class=active>內容1</li>
                <li>內容2</li>
                <li>內容3</li>
            </ul>
        </div>

        <div class="tab">
            <ul class="header">
                <li class=active>選項1</li>
                <li>選項2</li>
                <li>選項3</li>
                <li class="no-right">選項4</li>
            </ul>
            <ul class="content">
                <li class=active>內容1</li>
                <li>內容2</li>
                <li>內容3</li>
                <li>內容4</li>
            </ul>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
         var Tab = (function(){
             function _Tab($node){
                 console.log($node.find('.header>li'))
                   this.$Hli = $node.find('.header>li');
                   this.$Cli = $node.find('.content>li')
                   this.init();
                   this.bind();
              }
              _Tab.prototype.init = function(){
                   console.log(123)
              }
              _Tab.prototype.bind = function(){
                 var  _this = this
                  
                  this.$Hli.on('click',function(){

                      //老師我點擊第一個選項卡里的內容，怎么_this.$Hli 這個取得是下一個選項卡的所有li
                      console.log(_this.$Hli)
                      _this.$Hli.removeClass('active')
                      $(this).addClass('active')

                     var index = $(this).index();
                     _this.$Cli.removeClass('active')
                     _this.$Cli.eq(index).addClass('active')
                  })
              }
              return {
                  init: function($nodes){
                    $nodes.each(function(){
                        new _Tab($(this))
                    })
                  }
              }
         })()

         Tab.init($('.tab'))
        
    </script>
</body>

</html>
  1. 輪播組件
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>gaoyang</title>
    <style>
        .ct {
            width: 400px;
            overflow: hidden;
            position: relative;
            /*text-align: center;*/
        }
        
        .img-list {
            position: relative;
            list-style: none;
            margin: 0;
            padding: 0;
            width: 2000px;
            left: -400px;
        }
        
        .img-list:after {
            content: '';
            display: block;
            clear: both;
        }
        
        .img-list>li {
            width: 400px;
            float: left;
            font-size: 0;
        }
        
        .img-list>li>img {
            width: 100%;
        }
        
        .ct>p {
            position: absolute;
            margin: 0;
            padding: 0;
            width: 40px;
            height: 40px;
            background: #333;
            opacity: 0.8;
            color: #fff;
            cursor: pointer;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
        }
        
        .ct>.pre {
            left: 20px;
            top: 130px;
        }
        
        .ct>.next {
            right: 20px;
            top: 130px;
        }
        
        .ctt {
            text-align: center;
        }
        
        .page-controll {
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            position: absolute;
            list-style: none;
            bottom: 20px;
        }
        
        .page-controll>li {
            display: inline-block;
            margin-right: 10px;
            width: 50px;
            height: 10px;
            border-radius: 5px;
            background: #333;
            /*float: left;*/
        }
        
        .page-controll>.active {
            background: #fff;
        }
    </style>
</head>

<body>
    <div class="ct">
        <ul class='img-list'>
            <li>![](http://upload-images.jianshu.io/upload_images/1909214-1faf2b148848c85f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](http://upload-images.jianshu.io/upload_images/1909214-f2b7e50c20f7bd0d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](http://upload-images.jianshu.io/upload_images/1909214-573a0144b46eecbf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](http://upload-images.jianshu.io/upload_images/1909214-1faf2b148848c85f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](http://upload-images.jianshu.io/upload_images/1909214-f2b7e50c20f7bd0d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
        </ul>
        <div class="ctt">
            <ul class="page-controll">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <p class='pre'><</p>
        <p class='next'>></p>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        var Recycle = (function () {
            function RecycleImg($node) {
                this.$ul = $node.find('.img-list')
                console.log(this.$ul)
                this.$pre = $node.find('.pre')
                this.$next = $node.find('.next')
                this.$page = $node.find('.page-controll>li')
                this.currentPage = 0;
                this.bind();
            }
            RecycleImg.prototype.bind = function () {
                // this.$ul.css('left', -400)
                _this = this
                this.$pre.on('click', function () {
                    _this.preImg()
                })
                this.$next.on('click', function () {
                    _this.nextImg()
                })
            }
            RecycleImg.prototype.preImg = function () {

                _this = this;
                this.$ul.animate({ left: '+=400' }, function () {
                    console.log(1)
                    _this.currentPage--;
                    if (_this.currentPage == -1) {
                        _this.$ul.css('left', '-1200px')
                        _this.currentPage = 2
                    }
                    _this.pageControll();
                }

                )

            }
            RecycleImg.prototype.nextImg = function () {

                _this = this;
                this.$ul.animate({ left: '-=400' }, function () {

                    _this.currentPage++;
                    // console.log(_this.currentPage)
                    if (_this.currentPage == 3) {
                        _this.$ul.css('left', '-400px')
                        _this.currentPage = 0
                    }

                    _this.pageControll();
                }

                )
            }
            RecycleImg.prototype.pageControll = function () {
                this.$page.removeClass('active')
                this.$page.eq(this.currentPage).addClass('active')
            }
            return {
                init: function ($node) {
                    new RecycleImg($node)
                }
            }

        })()

        
        Recycle.init($('.ct'))
    </script>
</body>

</html>
  1. 曝光加載
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>gaoyang</title>
    <style>
        .ct {
            width: 1220px;
            margin: 0 auto;
        }
        
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            margin-left: -10px;
        }
        
        ul:after {
            content: '';
            display: block;
            clear: both;
        }
        
        ul>li {
            width: 400px;
            margin-left: 10px;
            margin-bottom: 10px;
            float: left;
            font-size: 0;
        }
        
        ul>li>img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="ct">
        <ul>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/23.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/24.jpg"
                    alt=""></li>
            <li>
                <img src='http://cdn.jirengu.com/book.jirengu.com/img/28.jpg' data-src="http://cdn.jirengu.com/book.jirengu.com/img/22.jpg"
                    alt=""></li>
        </ul>
        <p class='load'>加載數據</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        var Lazy = (function () {
            function Exposure($nodes, callback) {
                this.$nodes = $nodes
                this.callback = callback;
                this.init();
                this.bind();
            }

            Exposure.prototype.init = function () {


            }
            Exposure.prototype.bind = function () {

               var  _this = this;
                $(window).on('scroll', function () {
                    _this.appear()

                })
                this.appear()
            }
            Exposure.prototype.appear = function () {
               var  _this = this
               console.log(this.$nodes)
                this.$nodes.not('.show').each(function () {
                    if (_this.isShow($(this))) {
                        _this.callback($(this))
                        $(this).addClass('show')
                        console.log($(this))
                    }

                })

            }
            Exposure.prototype.isShow = function ($node) {
                var scroTop = $(window).scrollTop();
                var windowH = $(window).height();
                var offsetTop = $node.offset().top
                if (scroTop > offsetTop - windowH) {
                    return true
                }
                return false;
            }

            return {
                init: function ($node, callback) {
                    new Exposure($node, callback)
                }
            }
        })()

        var str = ''
        Lazy.init($('.load'), function ($node) {
            str += '加載完成'
            setTimeout(function(){
                $node.text(str)
            },3000)
            
            // console.log($node)
        })
        Lazy.init($('.ct>ul>li>img'), function ($node) {
            var src = $node.attr('data-src')
            $node.attr('src', src);
            
            // console.log($node)
        })
    </script>
</body>

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.面向對象: 易維護: 采用面向對象思想設計的結構，可讀性高，由于繼承的存在，即使改變需求，那么維護也只是在局部...
    饑人谷_楠柒閱讀 1,741評論 4贊 24
  • 參考：tab組件229曝光組件187輪播組件172輪播二次封裝154 我的： 1： 封裝一個輪播組件 http:/...
    hhg121閱讀 256評論 0贊 0
  • 1.封裝一個輪播組件 輪播組件效果 2.封裝一個曝光加載組件 曝光組件效果 3.封裝一個 Tab 組件 Tab欄切...
    饑人谷_米彌輪閱讀 195評論 0贊 0
  • 題目1： 封裝一個輪播組件封裝輪播組件（效果）代碼題目2： 封裝一個曝光加載組件封裝曝光加載（效果）代碼題目3： ...
    Taaaaaaaurus閱讀 210評論 0贊 0
  • 題目1： 封裝一個輪播組件輪播組件題目2： 封裝一個曝光加載組件曝光加載組件題目3： 封裝一個 Tab 組件Tab 組件
    無目的閱讀 176評論 0贊 0