遮罩,在指定元素上进行遮罩
废话不多说,直接上代码:
ps:依赖 jquer.js
1.首先,定义一个 Overlay.js
代码如下:
/*遮罩 Overlay js 对象*/
function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}try{this.state=false;//遮罩状态 true 激活,false 没有激活this.bgElementId='overlay_bg';this.bgElement=document.createElement('DIV');$(this.bgElement).attr('id',this.bgElementId);this.viewHtml=options['viewHtml'];this.viewPanel=document.createElement('DIV');this.viewWidth=options['viewWidth']|320;this.viewHeight=options['viewHeight']|25;$(this.viewPanel).css({'background-color':'#FFFFFF','border':'1px solid #237AD3','display':'none','width':this.viewWidth+'px','height':this.viewHeight+'px','z-index':'1002','position':'absolute','top':'0','right':'0'});//先隐藏$(this.viewPanel).append(this.viewHtml);this.targetId =options['targetId'];this.targetElement=$('#'+this.targetId);$(this.bgElement).css({'display':'none'});//先隐藏$(this.bgElement).attr('class','bgOverlay');$(this.targetElement).css({'position':'relative'});//覆盖目标position设置为relative,便于覆盖物相对定位$(this.targetElement).append(this.bgElement);$(document.body).append(this.viewPanel);}catch(e){alert('Overlay,初始化失败!');}}Overlay.prototype.show=function (obj) { var that = this;$(that.bgElement).css({'display':'block'});//设置覆盖物的高度与覆盖目标保证一直(IE6下需要这样做方能撑开覆盖物)$(that.bgElement).css({'height':$(that.targetElement).height()+'px'});//获取鼠标点击坐标显示 可视面板var vp = $(obj).offset();var bgW = $(this.bgElement).width();var bgP = $(this.bgElement).offset();vp.top=vp.top-that.viewHeight-2;//调整位置//暂时只对左边界作调整处理var isLeftOverstep=false;while((vp.left+that.viewWidth)>(bgP.left+bgW)){isLeftOverstep=true;vp.left--;}if(isLeftOverstep){//如果越界并调整后,再调整5个像素,不至于挤在边上vp.left-=5;}$(this.viewPanel).css({'top':vp.top+'px','left':vp.left+'px','display':'block'});that.state=true;//激活遮罩
}
Overlay.prototype.hide=function () {var that = this;$(that.bgElement).css({'display':'none'});$(that.viewPanel).css({'display':'none'});that.state=true;//激活遮罩.state=false;//没有激活遮罩
}
2.页面引入下面的 overlay.css文件
代码如下:
/*遮罩样式\*/
.bgOverlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #C4C4C4; z-index:1001; -moz-opacity: 0.6; opacity:.60; filter: alpha(opacity=60);}
3.eg:
//创建一个遮罩对象 targetId:指的是被覆盖的元素ID(必填),<span style="font-family: Arial, Helvetica, sans-serif;">viewHtml:指遮罩启用后显示的框框的html内容(随你写,自由发挥,必填),</span><span style="font-family: Arial, Helvetica, sans-serif;">viewWidth:框框的宽度(默认320</span><span style="font-family: Arial, Helvetica, sans-serif;">可选</span><span style="font-family: Arial, Helvetica, sans-serif;">),viewHeight:'框框的高度(默认25可选),宽高可以根据自己需要调整</span>
var overlay=new Overlay({targetId:'dataListDiv',viewHtml:'测试'});
4.跑一下应该问题就不大了,大概流程就这样END;
遮罩,在指定元素上进行遮罩相关推荐
- CSS遮罩——如何在CSS中使用遮罩
Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...
- mask属性是css3的吗_CSS遮罩——如何在CSS中使用遮罩
大概一年前,我写过一篇文章介绍有关webkit中新的css技术--css滤镜,如果其他浏览器不能支持的话会,这是个麻烦. 有关于Webkit中的滤镜,大家要是感兴趣的话可以阅读<CSS3 Fil ...
- JavaScript 专题(九)数组中查找指定元素
JavaScript 专题(九)数组中查找指定元素 上一篇文章中,我们了解了数组扁平化的思想,并学习了 lodash 是如何处理数组扁平化的. 这次我们来讨论在数组中查找元素时所用的一些方法,并且参考 ...
- 鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字
搜索这个效果的时候,很多人都是用css结合jQuery实现的,其实直接用css也可以实现哦~ 效果前: 效果后: 代码: <!DOCTYPE html> <html lang=&qu ...
- C#使用Windows API实现桌面上的遮罩层(鼠标穿透)
C#实现实现桌面上的遮罩层(鼠标穿透)主要通过一下几个API函数来实现:GetWindowLong,SetWindowLong,SetLayeredWindowAttributes.其中有一个Wind ...
- css如何实现鼠标移至图片上显示遮罩层及文字
css如何实现鼠标移至图片上显示遮罩层及文字 问题:一张图片当鼠标移动到上方时,会显示一个遮罩层,并且显示一些提示文字 html: <div class="contentimg&quo ...
- JS特性检测,检测元素上是否有指定属性或当前浏览器是否支持某元素或某属性
我们在开发的过程中如果要向后兼容的话我认为这篇文章还是很能帮助到你的.可以把笔者的代码copy过去使用. 我们要检查指定元素上面是否有特定的属性,可以使用下面这个函数: function elemen ...
- 怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法
mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...
- 【c++】8.map和vector容器查找、删除指定元素、emplace、insert
1.查找与删除 vector 和 map 容器中指定元素 vector 查找或删除vector的指定元素"123" 方法1:使用迭代器 不同于map(map有find方法),vec ...
最新文章
- 03005_SQL查询语句
- Tomcat正常启动,可以访问其主页,却不能访问webapp中的项目的jsp文件
- 使用structure101分析软件包的依赖关系
- (59)简单介绍RAM IP核类型和接口信号?
- LeetCode 120. 三角形最小路径和(动态规划)
- 创建ServiceArea
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
- 将长方形木框拉成平行四边形_微课|人教版五年级数学上册6.1平行四边形的面积(P8690)...
- 《华为战略管理法:DSTE实战体系》整体介绍
- cad打开a3样板图形_cad a3图框下载-cada3标准图框模板 dwg版 - 河东下载站
- ST-LINK驱动的安装(有图 超详细)
- SWF转GIF完美解决方案
- 泛微服务器运维监控,泛微协同平台E-cology8后台维护手册-流程引擎(261页)-原创力文档...
- 2016.2注册破解方法
- 智慧城管三维可视化决策系统平台(数字孪生)-解决方案开发案例
- zipOutputStream压缩后用RAR解压出现“不可预料的压缩文件末端”错误
- 这才是全规格样式车牌识别,秒杀各种“不服”
- 前端——》H5页面开屏分离特效
- DRM HDMI 调试分析之热插拔后HDMI不输出
- DM数据库:springboot+mybaits
热门文章
- linux mysql 主从 1130_Linux Mysql 1130错误解决
- 2022-2028年中国露天采矿行业调查与投资前景评估报告
- Docker 入门系列(2)- Docker 镜像, 免 sudo 使用 docker 命令、获取查看、修改镜像标签、查找删除创建镜像、导入导出镜像
- Windows10+Anaconda3+Pycharm环境搭建
- html 实现动态在线预览word、excel、pdf等文件
- Xcode couldn‘t find any iOS App Development provisioning profiles matching ‘com.example.***‘
- CPU 内部结构解析
- 摄像头模组(CCM)与镀膜
- h265webplayer
- 激光雷达Lidar与毫米波雷达Radar:自动驾驶的利弊