面向对象

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

PHP全栈学习笔记8
PHP全栈学习笔记8
总结.Net基础知识——献给即将入坑的同行们（一期）
面向对象基础
20-OOP类与对象
JavaScript面向对象核心知识归纳
面向对象（未完成）
面向对象：创建对象&继承
面向对象
面向对象的三大基本特征和五大设计原则

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>

PHP全栈学习笔记8
面向对象的基本概念，面向对象编程，oop，面向对象，面向对象的分析，面向对象的设计，面向对象的编程，什么是类。类...
PHP全栈学习笔记8
面向对象的基本概念，面向对象编程，oop，面向对象，面向对象的分析，面向对象的设计，面向对象的编程，什么是类。类...
总结.Net基础知识——献给即将入坑的同行们（一期）
什么是面向对象面向对象OO = 面向对象的分析OOA + 面向对象的设计OOD + 面向对象的编程OOP；通俗...
面向对象基础
面向对象编程包括：面向对象的分析（OOA）面向对象的设计（OOD）面向对象的编程实现（OOP）面向对象思想...
20-OOP类与对象
面向对象 Object Oriented 学习面向对象：XXOO 面向对象的学习：面向过程和面向对象的区别：面...
JavaScript面向对象核心知识归纳
面向对象概念面向对象就是使用对象。面向对象开发就是使用对象开发。面向过程就是用过程的方式进行开发。面向对象是...
面向对象（未完成）
面向对象标签（空格分隔）：面向对象第一章：面向对象（上）什么叫面向对象面向过程、面向对象、两者区别构造...
面向对象：创建对象&继承
博客内容：什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承什么是面向对象面向对象...
面向对象
了解什么是面向对象首先，我们学习面向对象，要了解什么是面向对象，面向对象的重要概念：类，对象。面向对象提出的这...
面向对象的三大基本特征和五大设计原则
1、面向对象概念 1.1、理解面向对象面向对象是相对面向过程而言；面向对象和面向过程都是一种思想；面向过程：...