首页 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
资讯 业界资讯 软件杂谈 编程开发 网站建设 网络观查 搜索引擎 移动应用 网站运营 网络地图
开发 移动开发 Web前端 架构设计 编程语言 互联网 数据库 系统运维 云计算 开发杂谈
[Web前端] 遮罩,在指定元素上进行遮罩
遮罩,在指定元素上进行遮罩
废话不多说,直接上代码:
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;


 此文从网络中自动搜索生成,不代表本网站赞成被搜索网站的内容或立场    查看原文
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年10日历
2018-10-22 0:28:29
 
  网站联系 软件世界网-www.sjsjw.com ©2014 蜀ICP备06016416号 三峰网旗下网站