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实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
JS实现炫酷雪花飘落效果
Aug 19 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小教程之实现双向链表
2014/06/12 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
Python批量转换文件编码格式
2015/05/17 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python Requests库基本用法示例
2018/08/20 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
学生党支部先进事迹
2014/02/04 职场文书
优秀员工评语
2014/02/10 职场文书
运动会演讲稿100字
2014/08/25 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
写给领导的感谢信
2015/01/22 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL