JavaScript编写页面半透明遮罩效果的简单示例


Posted in Javascript onMay 09, 2016

半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助

<div > 
<h4><span>现在注册</span><span >关闭</span></h4> 
<p> 
<label> 用户名</label> 
<input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> 
</p> 
<p> 
<label> 密 码</label> 
<input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> 
</p> 
<p> 
<input type="submit" value="注册" class="sub" /> 
<input type="reset" value="重置" class="sub" /> 
</p> 
</div> 
<div ></div><!-- 遮罩层div--> 
<script type="text/javascript"> 
var myAlert = document.getElementById("alert"); 
var myMask=document.getElementById('mask'); 
var reg = document.getElementById("content").getElementsByTagName("a")[0]; 
var mClose = document.getElementById("close"); 
reg.onclick = function() 
{ 
myMask.style.display="block"; 
myAlert.style.display = "block"; 
myAlert.style.position = "absolute"; 
myAlert.style.top = "50%"; 
myAlert.style.left = "50%"; 
myAlert.style.marginTop = "-75px"; 
myAlert.style.marginLeft = "-150px"; 
document.body.style.overflow = "hidden"; 
} 
mClose.onclick = function() 
{ 
myAlert.style.display = "none"; 
myMask.style.display = "none"; 
} 
</script> 
</body> 
</html>  

全屏幕遮盖

<!DOCTYPE html>
<style>
#mask {
 position:fixed;width:100%;
 top:0px;left:0px;
 _position:absolute;
 _top:expression(documentElement.scrollTop);
 background:rgba(0,0,0,0.5);
 background:transparent\9;
 filter:progid:DXImageTransform.Microsoft.Gradient(
 startColorStr=#80000000,endColorStr=#80000000
 );
 display:none;
}
#mask_td {text-align:center;}
</style>
<img
 src="http://web-tinker.com/images/TheMagicConch.jpg"
 width="100" id="img" 
/>
<table id="mask"><tr><td id="mask_td"></td></tr></table>
<script>
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE?isIE[1]:isIE;
//声明变量
var img,mask;
//获取元素
img=document.getElementById("img");
mask=document.getElementById("mask");
mask.td=document.getElementById("mask_td");
//计算mask的大小
mask.setSize=function(){
 //获取文档可见区域宽度并设置到mask上
 var de=document.documentElement;
 mask.style.width=de.clientWidth+"px"
 mask.style.height=de.clientHeight+"px";
};
//添加show方法
mask.show=function(){
 //隐藏页面的滚动条
 document[
 isIE<9?"documentElement":"body"
 ].style.overflow="hidden";
 //计算mask的大小
 mask.setSize();
 //显示
 mask.style.display=isIE==6?"block":"table";
};
//添加hide方法
mask.hide=function(){
 //显示页面滚动条
 document[
 isIE<9?"documentElement":"body"
 ].style.overflow="";
 //清空里面的内容
 mask.td.innerHTML="";
 //隐藏
 mask.style.display="none";
};
//添加append方法
mask.append=function(e){
 //在mask的TD里面添加内容哦你
 mask.td.appendChild(e);
};
//点击mask关闭
mask.onclick=function(e){
 //判断事件来源,如果是空白区域被点击了就关闭mask
 e=e||event;
 (e.target||e.srcElement)==mask.td&&mask.hide();
};
//窗体大小改变时也改变mask的大小
window.onresize=function(){
 mask.setSize();
};
//点击图片的事件
img.onclick=function(){
 //创建一个图片对象
 var o=new Image;
 //设置图片的地址
 o.src=img.src;
 //在mask内添加内容
 mask.append(o);
 //显示mask
 mask.show();
};
</script>
Javascript 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
js清空form表单中的内容示例
May 20 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
echart简介_动力节点Java学院整理
Aug 11 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 #Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 #Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 #Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 #Javascript
You might like
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
vue实现分页组件
2020/06/16 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Django单元测试工具test client使用详解
2019/08/02 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Python同时迭代多个序列的方法
2020/07/28 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
英语专业个人求职信范文
2014/02/01 职场文书
幼儿园家长评语
2014/02/10 职场文书
质量月口号
2014/06/20 职场文书
给老师的一封感谢信
2015/01/20 职场文书
安全生产培训心得体会
2016/01/18 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python