css、js两种方法实现遮罩效果
来源:互联网 发布:linux --help和help 编辑:程序博客网 时间:2024/05/22 00:39
css实现遮罩
<style tyle="text/css">
.zhezhao{
z-index:0px; 层深度
position:absolute;//必须为绝对定位
left:50px;
top:50px; 位置及大小
width:200px;
height:400px;
background-color: #191919;
filter: Alpha(Opacity=70);
opacity: 0.7; 遮罩颜色及程度
-moz-opacity: 0.7;
}
.content{
z-index:1px;
}
</style>
<div class="zhezhao"><div class="content">ok!</div></div>
js实现遮罩
<style type="text/css">
.content{z-index:1px; }
</style>
<script type="text/javascript">
function dG(id)
{
return document.getElementById(id);
}
function cE(id)
{
return document.createElementById(id);
}
//创建显示遮照层
function createZheZhao() {
if (dG("cover_id")) {//有遮照层
dG("cover_id").style.display = "block";
}
else {//否则创建遮照层
var coverDiv = cE("div");
document.body.appendChild(coverDiv);
coverDiv.id = "cover_id";
with (coverDiv.style) {
position = 'absolute';
background = '#CCCCCC';
var bodysize = getBodySize();
left = '0px';
top = '0px';
height = bodysize[1];
width = bodysize[0];
zIndex = 0;
}
}
}
//获取窗体的长、宽
function getBodySize() {
var bodySize = [];
with (document.documentElement) {
bodySize[0] = (scrollWidth > clientWidth) ? scrollWidth : clientWidth;
bodySize[1] = (scrollHeight > clientHeight) ? scrollHeight : clientHeight;
}
return bodySize;
}
function quxiao()
{
dG("cover_id").style.display = "none";
}
</script>
- css、js两种方法实现遮罩效果
- WordPress引入css/js两种方法
- 纯div+css实现手风琴效果下拉框的两种方法
- 两种方法实现文字阴影效果
- 两种方法使用js读写cookie实现一个底部广告浮层效果
- 两种方法实现CSS垂直居中
- 两种方法实现CSS垂直居中
- 两种方法实现CSS垂直居中
- css实现三角形的两种方法
- 仿Windows弹出气泡提示框JS+css实现的两种方法,附源代码
- js+css实现模态层效果
- css阴影效果实现方法
- JS动态创建css的两种方法
- 逐帧动画 两种实现方式 css和js
- 下拉菜单的两种实现方式:CSS和JS
- 比较两种方法实现数据统计效果
- Android 按钮效果的两种实现方法
- Android 按钮效果的两种实现方法
- ???
- Web中模态对话框加载后根据加载内容动态改变其大小并使其居中
- learning bash shell 学习笔记(三)
- 用VC++遍历目录
- csdn有没有手机网站啊?
- css、js两种方法实现遮罩效果
- C调用lua脚本的效率测试
- WPF从我炫系列3---内容控件的用法
- dedecms隔行不同色
- Android防火墙+流量统计代码
- [转]JQuery操作checkbox、radio等示例
- (转)80后集体失恋
- 活用DedeCms进行SEO优化全攻略
- sqlloader的简单使用