在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
CSS遮罩层，顾名思义就是在div上，再“铺”一层半透明的div。在hover时，亦可进一步改变该遮罩层的色彩和透明度。我们可以通过css定位和背景色实现。
CSS遮罩层实现及hover状态丢失问题
display: inline-
width: 300
border-radius: 4
.block__overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
.block:hover .block__overlay {
background-color: rgba(100, 200, 0, .5);
Html代码：
&div class="block"&
在Mouse hover时，如果快速点击鼠标，可能会丢失mouse hover的效果。这在windows上的浏览器经常出现，造成'闪烁'。虽然在macbook上出现的时候很少。
解决方案：点击鼠标时，添加isActive 样式，强制显示'hover'里的样式。等mouse out时，去掉isActive class。
&img src="test.png" width="300px"&
&!-- 遮罩住了文本段落和图片 --&
&div class="block__overlay"&
普通状态下的效果：
鼠标Hover时的效果图：
问题是，在鼠标hover的时候多次快速点击鼠标，会导致hover状态失效。这个问题在windows的浏览器（包括windows版本的Chrome， FireFox）时常发生，尽管在macOs的各种浏览器挺少发生。
Hover状态丢失的简单解决方案
基本思路是，点击鼠标时给.block添加isActive class，强制它显示Hover里的样式。在鼠标不断点击以致于丢失hover时，也会因为添加了isActive class而照样显示hover里的样式。
/*.isActive 拥有:hover相同的样式*/
.block:hover .block__overlay,
.block.isActive .block__overlay {
background-color: rgba(100, 200, 0, .5);
var block = document.getElementsByClassName("block")[0];
block.addEventListener('mouseout', function (evt) {
// mouse hover时，不断地快速点击鼠标，可能会触发mouseout事件，尽管并不是真正将鼠标move out了。
// 这里通过offsetX，offsetY来判断鼠标的位置，是否真正还在.block内
if (evt.offsetX &= 0 || evt.offsetY &= 0 || evt.offsetX &= block.offsetWidth || evt.offsetY &= block.offsetHeight) {
console.log('Really moved out');
if (this.classList.contains('isActive')) {
this.classList.remove('isActive');
}, false);
block.addEventListener('click', function (evt) {
if (!this.classList.contains('isActive')) {
this.classList.add('isActive');
}, false);
Hover状态丢失的通用解决方案
若.block里有多个定位元素，鼠标在子元素内部向上移动时，虽然鼠标可能依旧在.block内部，但是evt.offsetY可能是负数。依照上述简单方案判断结果是，鼠标在.block外部，就不对了。为此我们需要一种通用的方案。
以下图效果举例。我们在.block里添加一个红色?和对勾
CSS代码较多，请参考：
摘出HTML代码：可以看到添加了block__circle.
&div class="block"&
&img src="tianyuan1.jpg" style="width: 300"&
&div class="block__overlay"&
&div class="block__circle"&
&input id="chk1" type="checkbox"&
&label for="chk1"&&/label&
&button class="block__viewer"&
click to view
在鼠标从红色圆圈向上移动到圆圈外部 但仍在.block内时, offsetY是小于0的。 如果依旧应用简单方案里的js，就会错误地得出鼠标在.block外的结论。为此我们使用toElement属性，它表示mouse移动到哪个元素。如果该元素是.block的子孙元素，我们就认为鼠标还在.block内。FireFox的event没有toElement属性，我们用getToElement函数解决。
function getToElement(evt) {
if (evt.type == 'mouseout') {
node = evt.relatedT
} else if (evt.type == 'mouseover') {
node = evt.
if (!node) {
while (node.nodeType != 1) {
node = node.parentN
var findElement = (function(){
var found =
function doFindElement(target, scope) {
if (!found && scope && scope.childElementCount & 0) {
for (var i=0; i& scope.childElementC i++) {
var child = scope.children[i];
if (target == child) {
} else if (child.childElementCount & 0) {
doFindElement(target, child, found)
return function (target, scope) {
doFindElement(target, scope);
var block = document.getElementsByClassName("block")[0];
block.addEventListener('mouseout', function (evt) {
var toElement = evt.toElement || getToElement(evt) || evt.srcE
if (toElement == this || findElement(toElement, this)) {
console.log('Does NOT really move out');
console.log('Really moved out');
if (this.classList.contains('isActive')) {
this.classList.remove('isActive');
* The below code: the old way no long works correctly, because offsetX, offsetY rely on fromElement.
* When mouse move up direction out of 'circle', the OffsetY could be negative, but mouse
* is still inside the outermost .block.
if (evt.offsetX &= 0 || evt.offsetY &= 0 || evt.offsetX &= block.offsetWidth || evt.offsetY &= block.offsetHeight) {
console.log('OLD way: Really moved out');
if (this.classList.contains('isActive')) {
this.classList.remove('isActive');
console.log('OLD way: Doest NOT move out');
}, false);
block.addEventListener('click', function (evt) {
if (!this.classList.contains('isActive')) {
this.classList.add('isActive');
}, false);
控制台查看鼠标点击.block div后的class：
鼠标移走之后，.block div的class：
本文介绍了CSS遮罩的简单实现，以及在鼠标点击.block时如何保持遮罩层的hover 状态。具体代码可查看
2 收藏&&|&&15
你可能感兴趣的文章
46 收藏，8.1k
4 收藏，1.2k
如果有问题，欢迎拍砖。如果对您有用，还望给投一票。多谢。
如果有问题，欢迎拍砖。如果对您有用，还望给投一票。多谢。
.block {...}.block:hover {...}两行CSS解决的问题，居然写了这么多....
要实现hover状态，使用伪类就行了。“遮罩”被用于hover状态，显然是非常不合适的。
.block {...}
.block:hover {...}
两行CSS解决的问题，居然写了这么多....
要实现hover状态，使用伪类就行了。
“遮罩”被用于hover状态，显然是非常不合适的。
谢谢关注。我在实际项目里的.block 本身已有background color的设置。所以添加了block__overlay它只负责遮罩。另外发现windows上的浏览器，鼠标快速点击时，貌似会变成文本选中状态，而hover状态会丢掉。所以只好采用本文里的方案。这也是本文的主要内容。针对问题““遮罩”被用于hover状态”：我们需要在hover的时候，修改遮罩的透明度。
谢谢关注。我在实际项目里的.block 本身已有background color的设置。所以添加了block__overlay它只负责遮罩。
另外发现windows上的浏览器，鼠标快速点击时，貌似会变成文本选中状态，而hover状态会丢掉。所以只好采用本文里的方案。这也是本文的主要内容。
针对问题““遮罩”被用于hover状态”：我们需要在hover的时候，修改遮罩的透明度。
代码已有更新 在windows下的Chrome IE FF以及MacOS上测试，都能正确的工作。
代码已有更新 /JackieGe/advanced-web-program/tree/master/ch2-css-hover
在windows下的Chrome IE FF以及MacOS上测试，都能正确的工作。
谢谢各位的阅读和支持。经过更严格的测试后，做了一点修正：
HTMLElement.prototype.isChildOf 弃用，它存在漏洞。 改为 findElement 闭包。
.block div里添上图片，遮罩层遮住图片，更形象地解释遮罩。代码也已经更新。
谢谢各位的阅读和支持。经过更严格的测试后，做了一点修正：
1. HTMLElement.prototype.isChildOf 弃用，它存在漏洞。 改为 findElement 闭包。
2. .block div里添上图片，遮罩层遮住图片，更形象地解释遮罩。
代码也已经更新。
分享到微博？
我要该，理由是：Written by jquery personality jConfirm, jAlert, jPrompt, jshowdiag pop-up box with the words, but also with the corresponding jQuery file
Simple Overlay 网站 : http://moreco.de/simple-overlay/ Simple Overlay 是一个轻量级的jQuery遮罩层插件,当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层. 这是个轻量级并且兼容性强的插件,用到了jQuery的淡入淡出效果来显示遮罩.插件也具有很高的可定制性,用户可自定义颜色.透明度等. 在线演示:http://moreco.de/simple-overlay/demo 授权协议: 未知 开发语言: Java
现在全屏的半透明遮罩层在web2.0网站应用非常广泛了,绝大多数遮罩是通过计算页面大小,然后覆盖一个与页面同等大小的层实现,如腾讯qzone, wordpress后台. 步入正题: 现在全屏的半透明遮罩层在web2.0网站应用非常广泛了,绝大多数遮罩是通过计算页面大小,然后覆盖一个与页面同等大小的层实现,如腾讯qzone, wordpress后台.这种方式本来无可非议,但是在页面很长的时候在IE8下会失效(国外资料的解释是与机器显卡相关),有些完美情节的同学遇到这个问题后就抓破了头,无奈之下甚至
弹出模式化遮罩层的方法有很多,在本文为大家介绍下使用js实现最简单的模式化遮罩层,具体如下,感兴趣的朋友不要错过 假设我们有一个容器container如下: &style type=&text/css&& #container{width:height: overflow:} /*这里的overflow:属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/
这篇文章主要介绍了js形成页面的一种遮罩效果实例代码,有需要的朋友可以参考一下 用这锻代码 之前请先下载jquery库 var maskStackCount = 0; function mask(method){ //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window) var winObj=window.top.$(&body&).find(&iframe[name='dialognormaliframe']&
这篇文章主要介绍了WinForm特效之桌面上的遮罩层实现方法,是一个非常实用的技巧,需要的朋友可以参考下 本文实例讲述了WinForm特效之桌面上的遮罩层实现方法,分享给大家供大家参考之用.具体如下: 这个一个窗体特效,可以帮你了解几个windows api函数. 效果:windows桌面上增加一个简单的遮罩层,其中WS_EX_TRANSPARENT 比较重要,它实现了鼠标穿透的功能. 主要功能代码如下: using S using System.D using Sys
遮罩层实现浮层DIV登录的效果,想必很多的朋友都有遇到过吧,实现起来也是很简单的,下面有个不错的实现,大家可以感受下 这个就没什么好说的了..直接上代码啊!! 首先是HTML的代码.其中包含了登录点击按钮以及一个简陋的登录框. &body& &div id=&shade&&&/div& &div& &a onclick=&login()& style=&cursor:pointer&&登
弹出div显示遮罩层的效果,想必大家都有见到过吧,下面有个示例,大家可以参考下 //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var
今天在项目中用到了一个很好的div弹出层效果,jQuery+html5实现div弹出层并遮罩背景,效果非常棒,拿出来和大家一起分享! 渐入弹窗,背景变色不可点击.查看效果:/detail/t08gmoij &!doctype html& &html& &head& &meta charset=&utf-8&& &title&popup&/title& &script type=&
这篇文章介绍了jquery弹出关闭遮罩层实例,有需要的朋友可以参考一下 &!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&gt
我将上一章中了插件做了个小小的升级,实现了自动运行效果,完整代码大家见demo 主要的变化点有:把'下一条'.'上一条'的click事件抽象到一个函数showNext中.添加setInterval,添加selector元素的hover事件.好了,我们一个个的看. showNext函数: //显示函数 function showNext(flag) { //隐藏导航 $(config.selector).find('a').css('display', 'none'); //创建遮罩 $.tran
html 锁定页面(js遮罩层弹出div效果),需要的朋友可以参考下. &htmlxmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312&/& &title&UntitledDocument&/title& &scr
本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下 js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) &!doctype html& &head& &meta charset=&utf-8& /& &title&&/title& &style type=&text/css&& *{}{margin:0;padding:0;}
这篇文章主要介绍了js鼠标悬浮出现遮罩层的方法,以实例形式较为详细的分析了html及css页面布局与js特效的实现方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: &ul class=&site-tag fl&& &li&&a data-title=&科学& href=&#&&&i style=&quot
这篇文章主要介绍了jquery实现图片灯箱明暗的遮罩效果,有需要的朋友可以参考一下 效果如下: DIV结构: jquery实现: 调用:
CSS+Js图片切换技术,类似的已有不少了,这一个使用了遮罩过渡的效果,同样应用到了TAB选项卡上,本页面仅是为了演示,大家用时候把它拆分开来,这个效果也对学习图片效果制作很有帮助. Js遮罩效果的TAB及图片切换 神秘花园 脚本之家演示 人间仙境 WEB前端 VB封装一个文本文件读写类含示例 Csdn网站右下角的滑出弹出提示(带关闭功能) VC++做的精美仿XP开始菜单 VB+Access学生综合档案管理系统 Delphi随机抽取幸运观众Access数据库版 多线程的VC++高速文件搜索代码
实现局部遮罩,或许对某些朋友有着特殊的意义.局部遮罩的原理很简单另外加上关闭就有着另一番的效果,本文将介绍实现方法,感兴趣的朋友可以了解下,或许对你有所帮助 //实现局部遮罩 &script type=&text/javascript&& function Shade(){ var s = document.getElementById(&shade&); s.style.display = &block&; } function D
我们将创建一个简单的jquery菜单,只要我们悬停在导航栏的区域里,将展示给我们的画面是:明亮的菜单在稍显黑暗的背景图中脱颖而出 jquery导航是一个网站必不可少的模块,当一个用户在一个网站上浏览的时候,为了某个目的而查看网站导航栏的时候,突出导航栏的效果是重中之重.因此必须要使用一个效果:jquery遮罩层.利用明暗效果来突出当前用户的操作. $(function() { var $oe_menu= $('#oe_menu'); var $oe_menu_items= $oe_menu.ch
比起使用注册页和登陆页,网站在当前页使用遮罩层注册和登陆的用户体验要好不少.这里使用jQuery和CSS实现一个简单的遮罩效果. 在页面点击&注册&,出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外的其他元素:点击注册框上的&随便逛逛&,遮罩层消失. 预览地址: http://jsfiddle.net/p2x3c7df/embedded/result/ 要点: 1.注册框始终水平.垂直居中,包括鼠标滚轮上下滚动页面.缩放页面和调整浏览
这篇文章主要介绍了如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,需要的朋友可以参考下 本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此小姑. 代码如下: &!DOCTYPE html& &html& &head& &meta charset=& utf-8&& &meta
JS判断页面加载状态以及添加遮罩和缓冲动画的代码废话少说,直接贴代码!有注释 function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subS //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientW var bodyHeight = Math.max(docume
最近在做手机端效果的时候,页面需要在下拉菜单滚动的时候,阻止页面的滚动.于是就研究了一下bootstrap模态框的实现原理. 实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色部分是关键的部分 .cover { position: top: 0 right:0 bottom:0filter: alpha(opacity
div层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽的实例js代码 1 拖动+遮罩+移动+改变元素大小 popper.w's code Just a Test 什么时候能拖动我啊 Author:popper.w Email:[email protected] QQ: webSite: [url][/url] [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2 层打开效果 Code By popper.w [Ctrl+A 全选 注:
遮罩在某些情况下还是比较实用的,下面为大家介绍下如何为指定的元素添加遮罩层,感兴趣的朋友可以了解下 //遮罩层 $j(&&div id='shade'&&/div&&).css({ position:'absolute', top:0, left:0, backgroundColor:&#808080&, opacity:0.1, zIndex:300 }).height($j(document).height()).width($j(doc
在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性 如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹
史上最精简,最强大的JS遮罩层效果,支持ie firefox jQuery遮罩层 &!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&& &he
这篇文章主要介绍了使用jQuery实现图片遮罩半透明坠落遮挡,效果非常棒,小伙伴们做相册的时候可以直接拿走使用. 默认九宫格图片排列效果,当鼠标悬停在图片上后,会从图片的上方下滑一个半透明遮罩的效果 同时出现一些文字介绍 使用方法: 1.将head中的css样式引入到你的网页中 2.将代码部分拷贝到你的网页body结束前的地方即可 (js.图片采用绝对路径,不建议修改) $(function(){ $('.sgw_img dt').hover(function(){ $(this).childr
这篇文章主要介绍了js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动,需要的朋友可以参考下 用JS写出遮罩层登陆框和对联广告并自动跟随滚动条滚动保持让用户一直可以看到 好了,天色已晚废话不多说,代码特别详细 有注释,请看代码. &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo
easyui可以说是轻量级的前端UI框架,更新到1.2.1支持更多的事件,方法和属性 在使用的过程中,发现easyui目前还缺少一些小功能或是未开放出来 拿datagrid插件来说,数据加载提供了两种方式远程和本地数据加载,但只有远程数据加载时才会显示数据加载的遮罩层,在数据加载完成后隐藏遮罩层:而本地数据加载时则不会出现遮罩,这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要 不过呢,在实际的项目开发过程中使用时,没有考虑使用url方式加载数据,则采用了loadData方法来异步加载数据
本文为大家介绍下父页面显示遮罩层,弹出半透明状态的dialog.dialog即弹出的子页面,需要的朋友可以参考下 上一章我介绍了遮罩的页面可增加部分区域编辑模块,这章将介绍父页面显示遮罩层,弹出半透明状态的dialog.dialog即弹出的子页面,div. 效果图如下: 具体代码实现如下: &!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&& &HTML& &HEAD& &
css3已经逐步应用到网站之中,大家对border-shadow.border-radius.text-shadow等,早已熟悉(为了兼容小站部分在使用).使用IE浏览器的用户很多效果无法体验到!很遗憾虽然IE9支持大部分css3,但transform和transition都无法支持. 亲!检查一下你的浏览器,看是否需要升级或更换吧? Demo预览 (注:请使用标准浏览器,切勿用IE9及以下神器,后果自负-) Demo中我们主要用到的css3 transform/transition/keyfr
面遮罩弹出框已经不是一个陌生的话题了,实现的方法大同小异多种多样,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html,感兴趣的朋友可以参考下哈 页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: &div id=&main&&&a href=&javascript:showBg();&&点击这里查看效果&/a&
把项目里很土的弹窗,改成了遮罩层显示,现在感觉好多了.在这里创建一个div和body一样大小,这样就可以把整个页面全部盖住了,具体实现祥看本文,希望可以帮助到你 闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了.上代码: 父页面: &div id='newDiv1' style=&display:&& &%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %&
这篇文章介绍了JS实现遮罩层效果的简单实例,有需要的朋友可以参考一下 function show(){ var cover = document.getElementById(&cover&); cover.style.width = document.documentElement.scrollWidth+&px&; cover.style.height = document.documentElement.scrollHeight+&px&;
用jquery实现的图片圆角效果代码. 运行后请刷新一次. 圆角遮罩图片实现图片圆角 by ahuinan
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这篇文章主要介绍了JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法,详细分析了弹出遮罩层效果的实现方法以及完整的实例代码,需要的朋友可以参考下 本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: &!DOCTYPE html& &html&
用js形成页面的一种遮罩效果,选择想要进行遮罩的窗口,在这里想要遮罩的是一个iframe窗口,具体的实现如下,感兴趣的朋友可以参参考下 用这锻代码 之前请先下载jquery库 var maskStackCount = 0; function mask(method){ //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window) var winObj=window.top.$(&body&).find(&iframe
实现遮罩层的方法有很多,但大多都是使用js css来实现的,本例也实现一个,效果还不错,喜欢的朋友可以感受下 &div style=& position: width: 100%; height: 100%; left: 0 top: 0 background-color: B z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;&&&/div& z-index 必须大于
这篇文章介绍了Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法,有需要的朋友可以参考一下 这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置
jquery blockUI 遮罩不能消失与不能提交的解决方法,使用jquery blockUI的朋友可以参考下. //显示遮罩 $.blockUI({ message: $('#divlogin'), css:{width:&400px&, height:&255px&, top: ($(window).height() - 400) /2 + 'px', left: ($(window).width() - 400) /2 + 'px'} }); //取消遮罩
本文为大家详细介绍下使用jQuery实现鼠标滑过遮罩高亮显示效果,想必这种效果在网上大家都有见到过,下面是具体的示例,感兴趣的各位可以参考下哈,希望对大家有所帮助 &!DOCTYPE html& &html lang=&en&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& &title
这篇文章主要介绍了js实现遮罩层弹出框的方法,可实现对遮罩层弹出框的样式定义.按钮事件及相关功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: &style& #H-dialog{display:position:z-in
这篇文章介绍了简单的Jquery遮罩层代码实例,有需要的朋友可以参考一下 Css代码 #brg { width: 100%; height: 100%; background: #333; position: top: 0; left: 0; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; position: top: 0; left: 0; display: } #sho
下面是个应用的小例子用来统一处理ajax请求中利用完全透明遮罩层组织用户和界面元素交换,当ajax出错时提示用户 /* 模态遮罩层单例对象 opacity:背景透明度 1. show() 2. close() */ Q.Overlay = function(opacity) { var self = self._createDiv = function() { if (self._overlay) self._overlay = $(&&div&&/
在客户端浏览器中,可以在某个时机使用javascript把一个div作为遮罩层,来封锁整个页面. 具体解决方案如下: 一.IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度. offsetHeight 在IE下,offsetHeight也是浏览器可视区域的高(包括边线) 在FF
半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助 &!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
单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,本文使用jquery来实现这种效果,需要的朋友可以参考下 我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例) 如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页
javascript ImgBox透明遮罩层背景图片展示,就是增加了一个关闭按钮,比较实用. JavaScript Data Access Test Click me [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 注意上面的图片地址,大家自己
用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用. 其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验.由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较&庞大&的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask.unmask方法来实现该效果.大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中
感应鼠标的图片遮罩动画效果,鼠标放上后会动画显示文字提示,有意思哦,有兴趣的朋友运行一下看效果. 感应鼠标的图片遮罩动画效果 如果左下角提示错误,刷新一下就可以了. Visit The Best Designs Visit The Best Designs Visit The Best Designs Visit The Best Designs Visit The Best Designs [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Copyright (C) , All Rights Reserved.
版权所有 闽ICP备号
processed in 0.050 (s). 9 q(s)