全自动遮罩层插件layer2.0版本发布(可传参),兼容IE7以上
来源:互联网 发布:库里季后赛数据 编辑:程序博客网 时间:2024/05/20 02:25
遮罩层是我们在网页中经常用到的一种功能,本人将其封装成了一个插件,以便更快捷方便的使用。
此插件原理很简单,首先生成一个遮罩背影,然后计算内容显示窗体所要距离浏览器上下的距离进行定位,当浏览器窗口大小发生变化后即时变动,且内容显示窗体不随滚动条滚动而滚动。
引用方法:
<script src="PATH/js/jquery-1.11.3.min.js"></script>
<script src="PATH/js/layer-2.0.js"></script>
*注:请不要将自己的任何标签的id命名为layer,id为layer的标签是插件定义的遮罩层,同时z-index不要超过998。
基本设置:
<div id="tips(id可以自定义,只要调用即可)" class="样式自定义">此处显示遮罩层内容显示窗体要展现的内容</div>
js调用:
<script >
//显示遮罩层
$("#tips").layer();
//关闭遮罩层
$("#tips").hide();
$("#layer").remove();
< /script >
参数配置:
{
"bgColor" : "#000", //半透明的背景色
"opacity" : 0.6, //半透明的透明度(输入0~1之间的小数)
"layerHide" : false, //点击遮罩阴影是否隐藏,true 隐藏,false 不隐藏, 默认为false
"fadeIn" : false //是否渐隐渐显,true 是, false 否, 默认为false
}
插件下载地址:layer.2.0.js下载
- 全自动遮罩层插件layer2.0版本发布(可传参),兼容IE7以上
- 日期插件 兼容ie7+
- 页面滚动进度条 ( 兼容IE7及以上 )
- myeclipse8.0以上版本安装插件
- Myeclipse8.0以上版本插件添加
- 改变IE7及其以上版本缩放因子
- 用jq设置表单中的输入框占位符效果(兼容IE7以上)
- 用jq设置web端浏览器自适应效果(兼容IE7以上)
- Placeholder兼容IE6以及以上版本
- Android Gallery画廊 兼容4.0以上版本
- ecmall 兼容 php5.5以上版本
- OpenCV学习笔记(五)——2.0以上版本和以下版本的数据兼容
- OpenCV学习笔记(五)——2.0以上版本和以下版本的数据兼容
- php5.5以上版本curl上传图片(兼容php5.5以下版本)
- 关于IE兼容,发布后变成了IE9(浏览器IE9兼容模式,文档IE7标准模式)
- div+css ie7以上版本没问题,ie6效果不一样
- 自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7
- 切换到IE兼容模式,解决部分IE7以上浏览器不兼容的问题
- Android去掉标题栏的方法
- JavaScript中函数命名机制
- z-index无效,无论设置多大都被其他的元素覆盖
- mysql知识点
- android ui分析 - 今日头条UI主界面
- 全自动遮罩层插件layer2.0版本发布(可传参),兼容IE7以上
- JS判断移动设备的终端类型(浏览器UserAgent)
- OpenCV for Ios 学习笔记(1)-配置
- 驱动开发(1)基础知识
- 输入输出之对象序列化Serializable
- NSNotificationCenter消息推送
- WebRTC知识分享——信令服务
- Linux下安装并使用Java开发opencv的配置
- 面试题 31