面向对象

作者: GaoYangTongXue丶 | 来源:发表于2017-04-13 20:10 被阅读18次

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>

轮播组件

<!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>![](https://img.haomeiwen.com/i1909214/1faf2b148848c85f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](https://img.haomeiwen.com/i1909214/f2b7e50c20f7bd0d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](https://img.haomeiwen.com/i1909214/573a0144b46eecbf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](https://img.haomeiwen.com/i1909214/1faf2b148848c85f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](https://img.haomeiwen.com/i1909214/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>

曝光加载

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

面向对象

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读