面向对象
2017-04-13 本文已影响18人
GaoYangTongXue丶
- 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></li>
<li></li>
<li></li>
<li></li>
<li></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>
