磁性遮罩层

ding
ding 发布于 2017-01-01 21:20:41 浏览:2493 类型:原创 - 随笔 分类:JavaScript - 看仿 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	*{margin: 0;padding: 0;}
	ul,li,dl,dd{list-style: none;}
	span,em,i{font-style: normal;}
	.mask{background-color: rgba(0,0,0,0.6);opacity: 0;position: absolute;left: 0;top:0;z-index: 5;}
	.mask-box ul{overflow: hidden;margin:0 auto;}
	.mask-box li{display: block;position: relative;float: left;}
	.mask-box li a{display: block;}
	.mask-box li img{width: auto;height: auto;display: block;}
</style>
<body>
	<div class="mask">
		<h3></h3>
	</div>
	<div class="mask-box">
		<ul>
			<li>
				<a href="" data-tit="我是动画">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/01/210306zr977f7u7oprf3cy.jpg">
				</a>
			</li>
			<li>
				<a href="" data-tit="我是乖巧的金毛">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/01/210310k0lhyhl0xccj22cd.jpg">
				</a>
			</li>
			<li>
				<a href="" data-tit="我是一个藐视一切的二哈">
					<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/01/210314zzuork1205rvtkjv.jpg">
				</a>
			</li>
		</ul>
	</div>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$('ul li').each(function(){
			$(this).mouseover(function(){
				var $this=$(this).find("img");
				var oPosition=$(this).position();
				var _w=$this.width();
				var _h=$this.height();
				var tit=$(this).children("a").attr("data-tit");	
				$(".mask").stop().animate({
					opacity:1,
					left:oPosition.left,
					top:oPosition.top,
					width:_w,
					height:_h,
					lineHeight:_h+"px",
				},200).find("h3").empty().append(tit).css({
					verticalAlign:"middle",
					textAlign:"center",
					color:"red"
				});
			});
		});		
})
	</script>
</body>
</html>
磁性遮罩层
磁性遮罩层
磁性遮罩层
标签:
z
给个赞 20 人点赞
收藏 42 人收藏
评论 已有 5 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
deepSkyBlue
deepSkyBlue2017-01-02 10:57:571F
Good
举报 支持 (1) 回复 (0)
最新评论
1801341373
18013413732017-01-06 15:25:505F
bucuo
举报 支持 (0) 回复 (0)
ding
ding2017-01-06 10:51:304F
谢谢,流畅多了 //@zhaoyanxiansen:鼠标快速移入图片并频繁移动会有BUG。还是把mousemove改成mouseover好一点。
举报 支持 (0) 回复 (0)
zhaoyanxiansen
zhaoyanxiansen2017-01-04 12:33:543F
鼠标快速移入图片并频繁移动会有BUG。还是把mousemove改成mouseover好一点。
举报 支持 (0) 回复 (1)
125528458
1255284582017-01-02 15:06:092F
二哈好评!!
举报 支持 (0) 回复 (0)
deepSkyBlue
deepSkyBlue2017-01-02 10:57:571F
Good
举报 支持 (1) 回复 (0)
ding ding 作者

心所向,行所致

作者最新