面向对象

  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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,117评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,328评论 1赞 293
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,839评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,007评论 0赞 206
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,384评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,629评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,880评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,593评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,313评论 1赞 243
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,392评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,052评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2赞 270

推荐阅读更多精彩内容

  • 面向对象实例--常用组件
    1.面向对象: 易维护: 采用面向对象思想设计的结构，可读性高，由于继承的存在，即使改变需求，那么维护也只是在局部...
    饥人谷_楠柒阅读 1,635评论 4赞 24
  • 3面向对象实战
    参考：tab组件229曝光组件187轮播组件172轮播二次封装154 我的： 1： 封装一个轮播组件 http:/...
    hhg121阅读 244评论 0赞 0
  • 面向对象实战
    1.封装一个轮播组件 轮播组件效果 2.封装一个曝光加载组件 曝光组件效果 3.封装一个 Tab 组件 Tab栏切...
    饥人谷_米弥轮阅读 163评论 0赞 0
  • 面向对象实战
    题目1： 封装一个轮播组件封装轮播组件（效果）代码题目2： 封装一个曝光加载组件封装曝光加载（效果）代码题目3： ...
    Taaaaaaaurus阅读 190评论 0赞 0
  • 面向对象实战
    题目1： 封装一个轮播组件轮播组件题目2： 封装一个曝光加载组件曝光加载组件题目3： 封装一个 Tab 组件Tab 组件
    无目的阅读 163评论 0赞 0