遮罩,在指定元素上进行遮罩

2024-09-09 05:18
文章标签 进行 指定 元素 遮罩

本文主要是介绍遮罩,在指定元素上进行遮罩,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

废话不多说,直接上代码:

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;

这篇关于遮罩,在指定元素上进行遮罩的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1150267

相关文章

一文解密Python进行监控进程的黑科技

《一文解密Python进行监控进程的黑科技》在计算机系统管理和应用性能优化中,监控进程的CPU、内存和IO使用率是非常重要的任务,下面我们就来讲讲如何Python写一个简单使用的监控进程的工具吧... 目录准备工作监控CPU使用率监控内存使用率监控IO使用率小工具代码整合在计算机系统管理和应用性能优化中,监

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、

SpringBoot结合Docker进行容器化处理指南

《SpringBoot结合Docker进行容器化处理指南》在当今快速发展的软件工程领域,SpringBoot和Docker已经成为现代Java开发者的必备工具,本文将深入讲解如何将一个SpringBo... 目录前言一、为什么选择 Spring Bootjavascript + docker1. 快速部署与

linux解压缩 xxx.jar文件进行内部操作过程

《linux解压缩xxx.jar文件进行内部操作过程》:本文主要介绍linux解压缩xxx.jar文件进行内部操作,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、解压文件二、压缩文件总结一、解压文件1、把 xxx.jar 文件放在服务器上,并进入当前目录#

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文