遮罩层

css3 引导遮罩层

由 给你一囗甜甜゛ 提交于 2020-03-05 07:56:09
https://blog.csdn.net/tangtang5963/article/details/51276560 要实现遮罩层和部分区域高亮显示，这里的思路是应用了元素的border属性，将元素的四个border值设置的非常大，铺满整个屏幕，这样就实现了页面遮罩部分镂空的效果。 让遮罩层的的宽度和高度等于目标元素的宽度和高度，剩下的遮罩效果就是合理设置遮罩层四个border的值的大小，使遮罩层铺满整个屏幕。 我们想把引导效果做的更加好看一下，制作成椭圆的效果，需要用到css3的border-radius:50%;并且圈圈内带有模糊效果，如何实现？就需要用到css3的box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);这样一个属性。我们需要把当前元素作为外层限制标签，里面重新生成一个大尺寸伪元素，实现内层的高亮椭圆内边缘模糊效果，最终实现的效果如下如图所示： 由于我们的目标元素的宽度和高度是不固定的，我们可以设置各种元素的高亮效果，就不用在手动设置border的宽度来配合目标元素的宽度和高度，有没有一个通用的方法？这就需要用JS来实现啦，js的实现思路如下： 1 获取目标元素的宽度和高度，targetWidth,targetHeight 2 获取页面的宽度和高度,pageWidth,pageHeight 3 获取目标元素在页面中的位置

div上添加遮罩层用于提示信息

由 流过昼夜 提交于 2020-01-21 05:29:03
下面为完整代码,直接复制的页面即可使用 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <style type="text/css"> .black_overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80); } .white_content { display: none; position: fixed; top: 20%; left: 10%; width: 80%; height: 50%; border: 1px solid black; background-color: white; z-index: 1002; overflow: auto; } .shut_down{ text-align: right; cursor: default;

跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作

由 情到浓时终转凉″ 提交于 2019-12-31 02:56:11
一、层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv"> </div> <div class="div1">层1</div> <div class="div2">层2</div> <style type="text/css"> .div1{ background-color:#FF0000; width:2000px; height:2000px; } .div2{ background-color:#33FF66; width:100px; height:100px; position:fixed; left:50px; top:50px; } </style> <script> （1）对文档、屏幕、层的一些jquery基本操作 var showAdminUser = function (obj) { var offSet = $(obj).offset(); var docTop = offSet.top; //当前元素相对文档top偏移位置 var docLeft = offSet.left; //当前元素相对文档left偏移位置 var

Jquery超简单遮罩层实现代码

由 我的未来我决定 提交于 2019-12-28 06:44:45
在开发中，为了避免二次提交，遮罩层的运用越来越普遍 看了很多代码，下面跟大家分享一下我认为最简单的遮罩层实现方式： 1.样式如下设置： CSS代码 ： [html] view plain copy < style type= "text/css" > .mask { position: absolute; top: 0px; filter: alpha( opacity= 60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opacity:0.5; } </ style > 其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。 2.指定层的高度、和宽度。 js代码 [javascript] view plain copy <pre class= "html" name= "code"><script type= "text/javascript"> //兼容火狐、IE8 //显示遮罩层 function showMask(){ $( "#mask").css( "height",$(document).height()); $( "#mask").css( "width",$(document).width

C#实现Winform自定义半透明遮罩层

由 百般思念 提交于 2019-12-28 05:58:20
在网页中通过div+css实现半透明效果不难，今天我们看看一种在winfrom中实现的方法： 效果图如下，正常时： 显示遮罩层时： 自定义遮罩层控件的源码如下： View Code using System; using System.Drawing; using System.Windows.Forms; using System.ComponentModel; namespace MyOpaqueLayer { /// <summary> /// 自定义控件:半透明控件 /// </summary> /* * [ToolboxBitmap(typeof(MyOpaqueLayer))] * 用于指定当把你做好的自定义控件添加到工具栏时，工具栏显示的图标。 * 正确写法应该是 * [ToolboxBitmap(typeof(XXXXControl),"xxx.bmp")] * 其中XXXXControl是你的自定义控件，"xxx.bmp"是你要用的图标名称。 */ [ToolboxBitmap(typeof(MyOpaqueLayer))] public class MyOpaqueLayer : System.Windows.Forms.Control { private bool _transparentBG = true;//是否使用透明 private int

Vue小记(2)---倒计时/遮罩层

由 跟風遠走 提交于 2019-12-28 04:17:26
1、倒计时 <div class="timers" style="text-align:center;font-size:18px;font-weight:bold;"> <p v-if="sendAuthCode" class="c-right" @click="getCode" >关闭</p> <p v-if="!sendAuthCode" class="c-right"> 距离券源收集结束还有<span class="auth_text_blue" style="color:red;font-weight:bold;">{{timer}} </span> 秒</p> </div> data:{ return{ sendAuthCode: true, timer: 0, } } methods:{ getCode() { this.sendAuthCode = false; this.timer = 300; var auth_timetimer = setInterval(() => { this.timer--; if (this.timer <= 0) { this.sendAuthCode = true; clearInterval(auth_timetimer); window.location.reload(); // window.opener=null; //

JS遮罩层效果

由 这一生的挚爱 提交于 2019-12-24 19:00:46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title > 史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层 </ title > < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" > </ script > < script type = "text/javascript" > //显示灰色JS遮罩层 function showBg(ct,content){ var bH =$("body").height(); var bW =$("body").width()+16; var objWH = getObjWh (ct); $("#fullbg").css({width:bW

JS遮罩层效果， 兼容ie firefox jQuery遮罩层

由 ◇◆丶佛笑我妖孽 提交于 2019-12-24 17:51:08
代码 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > 史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层 </ title > < script type ="text/javascript" src ="jquery-1.3.2.js" ></ script > < script type ="text/javascript" > // 显示灰色JS遮罩层 function showBg(ct,content){ var bH = $( " body " ).height(); var bW = $( " body " ).width() + 16 ; var objWH = getObjWh(ct); $( " #fullbg " ).css({width:bW,height

点击弹出居中带有透明遮罩层窗口:

由 好久不见. 提交于 2019-12-24 10:47:09
本章节介绍一下如何点击一个按钮实现弹出一个居中窗口，并且此窗口带有半透明的遮罩层效果，此效果在当下比较流行，当然还有更为复杂的实现方式，当然效果也更为绚丽，下面介绍的代码能够简单实现此效果。 点击弹出居中带有透明遮罩层窗口: 本章节介绍一下如何点击一个按钮实现弹出一个居中窗口，并且此窗口带有半透明的遮罩层效果，此效果在当下比较流行，当然还有更为复杂的实现方式，当然效果也更为绚丽，下面介绍的代码能够简单实现此效果。 代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <! DOCTYPE html> < html > < head > < meta charset = " utf-8" > < meta name = "author" content = "http://www.softwhy.com/" /> < title >蚂蚁部落</ title > < style type = "text/css" > #fade { display:none; position:absolute; top

easyui为tab添加遮罩层

由 北城以北 提交于 2019-12-20 22:36:18
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 项目里要用HighChart显示图表，如果返回的数量量太多，生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置（至少本菜是没有找到）， Google了一下，根据另一个兄台写的方法，拿来改造了一下，效果不错。拿来分享 原文地址： jQuery扩展easyui.datagrid，添加数据loading遮罩效果代码 http://www.thinksaas.cn/group/topic/349102/ 修改后的代码： (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs("getSelected"); if (msg == undefined) { msg = "正在加载数据，请稍候..."; } $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel); $("<div class=\
订阅 遮罩层