js实现蒙版效果
本文实例为大家分享了js实现蒙版效果展示的具体代码，供大家参考，具体内容如下
思路
1.监听按钮的点击
2.阻止冒泡（最关键的一点）
3.让隐藏的显示出来
4.隐藏滚动条
5.点击文档：获取点击的标签
判断：让显示的都隐藏
显示滚动条
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height:100%;
}
#panel{
width:100%;
height:2000px;
background-color:#000;
opacity: 0.4; //透明度
filter: alpha(opacity： 40); //用于兼容IE浏览器
position: absolute;
top:0;
left:0;
display: none;
}
#box{
width:300px;
height:300px;
background-color: #fff;
position: absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
display: none;
border-radius: 5px;
}
</style>
</head>
<body>
<button id="btn">登录</button>
<div id="panel"></div>
<div id="box"></div>
<script src="js/myFunc.js"></script>
<script>
window.onload = function (){
//1.监听事件的点击
btn.onclick = function (event){
//1.0 阻止冒泡
if(event && event.stopPropagation){ //W3c标准
event.stopPropagation();
}else{ //IEx系列 IE 678
event.cancelBubble = ture;
}
//1.1隐藏的显现出来
$("box").style.display = "block";
$("panel").style.display = "block";
//1.2隐藏滚动条
document.body.style.overflow = "hidden";
}
//2.点击文档
document.onclick = function (event){
var e = event || window.event;
//2.1获取点击的标签
var tranId = e.target ? e.target.id : e.srcElement.id; //target:获取当前操作对象
//2.2判断
if(tranId !== "box"){
//1.1显示的隐藏出来
$("box").style.display = "none";
$("panel").style.display = "none";
//1.2显示滚动条
document.body.style.overflow = "auto";
}else{
window.location.href = "http://www.baidu.com";
}
}
}
</script>
最为重要的一点是要阻止事件冒泡
获取对象的id： var tranId = e.target ? e.target.id : e.srcElement.id;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍js实现抽奖效果，包括了js实现抽奖效果的使用技巧和注意事项，需要的朋友参考一下 效果图： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍js/jQuery实现全选效果，包括了js/jQuery实现全选效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js/jQuery两种代码实现全选效果的具体代码，供大家参考，具体内容如下 注意点 在获取子选框的时候别加上 全选框的个数了 技巧 找 tbody 下面的input标签 就可以 jq文件夹自己下载即可 思路 以上就是本文的全部内容，希望对大家的学习有所帮助
-
本文向大家介绍js实现交通灯效果，包括了js实现交通灯效果的使用技巧和注意事项，需要的朋友参考一下 主体结构 样式 js代码 利用定时器改变类名 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍js实现3D旋转效果，包括了js实现3D旋转效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现3D旋转效果的具体代码，供大家参考，具体内容如下 实现效果： 实现过程： 步骤一：先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建). 步骤二：给盒子和图片,设置对应的样式 第三步： js
-
本文向大家介绍js实现搜索栏效果，包括了js实现搜索栏效果的使用技巧和注意事项，需要的朋友参考一下 小编这边主要是介绍一个js中搜索栏的实现（没有提交数据那些），重点在于对焦点问题的理解。 那么这边小编就是要实现这样的一个搜索框 对焦点的理解： 通俗来讲当我们鼠标单击一个盒子时光标停留在该盒子事件上实现用户与栏之间的交互，这样就表明该盒子获取了焦点，以案例来说我们平常搜索栏点击可以输入文字，这个时
-
本文向大家介绍JS实现放烟花效果，包括了JS实现放烟花效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现放烟花效果的具体代码，供大家参考，具体内容如下 move.js 更多JavaScript精彩特效分享给大家： Javascript菜单特效大全 javascript仿QQ特效汇总 JavaScript时钟特效汇总 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大