homework/邓攀/高级任务3/exposure曝光组件封装.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>exposure 曝光组件</title>
		<style>
			body,ul{
				margin: 0;
				padding: 0;
			}
			li{
				list-style-type: none;
			}
			a{
				text-decoration: none;
			}
			.clearfix::after{
				content: "";
				display: block;
				clear: both;
			}
			.ct{
				width: 835px;
				min-width: 835px;
				margin: 100px auto;
			}
			.ct .img-list{
				margin-left: -50px;
			}
			.ct .item{
				margin-left: 50px;
				margin-bottom: 40px;
				float: left;
			}
			.ct .item>a{
				display: block;
				width: 240px;
				height: 185px;
			}
			.ct .item img{
				width: 245px;
				height: 185px;
			}
		</style>
	</head>
	<body>
		<div class="ct">
			<ul class="img-list clearfix">
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510183017YF8r2jOdbUsLGWwM.jpeg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509161540cvp9DALG4bs3ZMtP.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510150610L1SCu3U89bVpZlXz.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510164322E5b23FWjD7SizZIg.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510145347vp1V8UjbTzMRLCsA.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510152833sRqAhwIudrLZ1pai.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510135342JjQauY1WnLIy7phG.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/201705091852031K2Hl9seOcnEThdI.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510135136QSDdvukBKbYE9eML.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510131752mtVcw61ZMDL02QId.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/201705092207166sAVEdvCY8RuZNkL.png?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510120412n6pQsRjdyfqXTm8A.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510095110QWxrlT4PYO1VNJDS.png?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510100320lpeDrh04RyYsQ6Io.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510100056JAq3vH6fM7woCue2.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510105306wbBPpLiIfzO8ZvXW.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510080910JDiuEne6wjBsXPNM.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509192346GwpcVRjdzhTyIX3o.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/jpg/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509144019cUmr7P5akI0wnSB4.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/201705092329446XGRL2jWpblg7ths.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509184433BJX9xZNR2Ub5vrPF.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509150147QfN52qRZtlB0GHp4.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509114242khEaMXzn1LmgVcBo.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509210335ghJo1eL9yRj42zaW.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509175729rAo9zfYFwEinqcSH.jpeg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509161800vq1MGgbVLy86DYsJ.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509210353VCSAiM2r73Yl49va.png?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170508124300CjZqyJbmLrRtOdAh.png?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170510004048KcsTmCXpb794yWnv.png?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509164347diNS71xtKLmkwEJc.gif?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509155130URAo0LiENIatZFnY.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509152211o5CmW0nAha2zGfxK.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/201705082048384PMoiVEbOZ0AmeXr.gif?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509173553fisrFVTI2LP8oNwE.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509125353a6hsglGCYRZbikSK.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509174153te5dsYlziV4Nm1au.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509152056RYjvUSqsigwX1E8k.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509140502q8Hmua6POXxMBptS.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509142344dlMZ5TmJV0bcaXYy.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509125912odpP2AXafhNSblY5.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509101033TDkcuZEoiQnO9sGm.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509011643inTNCP3SUuQsfmye.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509090924FCz43nV2wqOKg7cX.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509093914uJQH03Z82vwUgqdF.png?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509100340byMUFArkmIftG059.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170508185206WeoU6VgnPbu8GyEc.png?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509002239CKrR6M8W73FdB2Oy.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170508182716cDS3vT02YxIXodNs.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170508234735twG0OJM7NLrFs2WA.png?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170509015857tdVLfxWa2h5jbqrU.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
				<li class="item">
					<a href="#">
						<img src="http://i2.muimg.com/588926/40c84ba95544ac41.png" data-src="http://img.qdaily.com/article/article_show/20170508175940YUeWGidpqkcl796m.jpg?imageMogr2/auto-orient/thumbnail/!245x185r/gravity/Center/crop/245x185/quality/85/format/webp/ignore-error/1" alt="">
					</a>
				</li>
			</ul>
		</div>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			var Exposure = (function(){
				var _Exposure = function($target,callback){
					this.target = $target;
					this.callback = callback;
					this.check();
					this.addScorllEvent();
				};
				_Exposure.prototype.addScorllEvent = function(){
					var that = this;
					$(window).on('scroll',function(){
						that.check();
					});
				};
				_Exposure.prototype.check = function(){
					if(this.isShow(this.target)){
						this.callback(this.target);
					}
				}
				_Exposure.prototype.isShow = function(){
					var scrollTop = $(window).scrollTop(),
						windowHeight = $(window).height(),
						offsetTop = this.target.offset().top,
						nodeHeight = this.target.height();
					var condition = scrollTop + windowHeight > offsetTop 
					                && scrollTop < offsetTop + nodeHeight;
					if(condition){
						return true;
					}else{
						return false;
					}
				}
				return {
					init: function($targets,callback){
						$targets.each(function(index,target){
							new _Exposure($(target),callback);
						});
					}
				}
			})();
			
			Exposure.init($('.img-list img'),function($img){
				showImg($img);
			});
			
			
			
			function showImg($img){
				var realImgUrl = $img.attr('data-src');
				$img.attr('src',realImgUrl);
			}
		</script>
	</body>
</html>