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 相关文章推荐
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
动态加载js的方法汇总
Feb 13 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
JS实现公告上线滚动效果
Jan 10 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
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
window.open的功能全解析
2006/10/10 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
前端性能优化建议
2020/09/17 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Python try except else使用详解
2021/01/12 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
孝敬父母的演讲稿
2014/05/14 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers