jquery 半透明遮罩效果 小结
16lz
2021-01-22
最近偏离学术的道路越来越远了!!
今天要小结的是实现一个半透明遮罩效果。点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩。点击遮罩区域,该正中央的部件消失,页面恢复成原来样子。
首先谈谈最简单的实现方式吧。准备两个div,一个是幕布<div class="bg"></div>,另一个是要显示在屏幕正中央的部件<div class="content"></div>,content 里面要显示什么东东,就由你自己去定义了。可以是图片,也可以是图表、视频什么的。然后就是添加效果,使得它有我们的效果。
1.既然点击了按钮,要遮住原网页,于是给这两个div设置显示优先级:z-index, 把content的设成3,bg的设成2
2 既然要半透明,那就给bg这个遮罩上一个颜色吧:background:#000
3 一开始他们是隐藏的:display:none. 某事件触发后,才显示,这就要用jquery的语句了:$('.bg').fadeIn(200);$('.content').fadeIn(400);
好了,就差不多了,很简单吧,完整的代码如下:
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;} .content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;} </style> <script type="text/javascript" src="js/jquery-1.10.2.min.js"> </script> <body> <p><div class="click1" style="color:red">点击这里</div></p> <div> 下面是网页的正文内容 blablabla </div> <div class="bg"></div> <div class="content"> <h1>欢迎新浪微博互粉!</h1> http://www.weibo.com/leavingseason <h1>相信音乐,相信五月天</h1> </div> <script type="text/javascript"> $(function(){ $('.click1').click(function(){ $('.bg').fadeIn(200); $('.content').fadeIn(400); }); $('.bg').click(function(){ $('.bg').fadeOut(800); $('.content').fadeOut(800); }); }); </script> </body> </html>
更多相关文章
- 如何使用jQuery UI Datepicker作为Django小部件?
- jQuery学习21---简单动画效果,show,hide,slideUp,slideDown,fade
- 使用jquery animate()实现对文本的反弹效果?
- Kendo网格:以角度获取小部件实例
- 如何在向下滚动时执行TEXT淡入效果
- 【jQuery】调用delay()方法延时执行动画效果
- 具有嵌套效果循环的jquery动画
- Jquery:JS弹出窗口DIV层效果
- 文字效果 - 图像到css / jQuery