网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
php教程
>
php常用代码
> >
[javascript学习指南]JavaScript 仿LightBox内容显示效果
[javascript学习指南]JavaScript 仿LightBox内容显示效果
发布时间:2018-05-20
【www.gdgbn.com--php常用代码】
提示:您可以先修改部分代码再运行
JavaScript 仿LightBox内容显示效果
JavaScript 仿LightBox内容显示效果
<script> var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 6); var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var Each = function(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; var Contains = function(a, b){ return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16); } var OverLay = Class.create(); OverLay.prototype = { initialize: function(options) { this.SetOptions(options); this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]); this.Color = this.options.Color; this.Opacity = parseInt(this.options.Opacity); this.zIndex = parseInt(this.options.zIndex); with(this.Lay.style){ display = "none"; zIndex = this.zIndex; left = top = 0; position = "fixed"; width = height = "100%"; } if(isIE6){ this.Lay.style.position = "absolute"; //ie6设置覆盖层大小程序 this._resize = Bind(this, function(){ this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; }); //遮盖select this.Lay.innerHTML = "" } }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Lay: null,//覆盖层对象 Color: "#fff",//背景色 Opacity: 50,//透明度(0-100) zIndex: 1000//层叠顺序 }; Extend(this.options, options || {}); }, //显示 Show: function() { //兼容ie6 if(isIE6){ this._resize(); window.attachEvent("onresize", this._resize); } //设置样式 with(this.Lay.style){ //设置透明度 isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100; backgroundColor = this.Color; display = "block"; } }, //关闭 Close: function() { this.Lay.style.display = "none"; if(isIE6){ window.detachEvent("onresize", this._resize); } } }; var LightBox = Class.create(); LightBox.prototype = { initialize: function(box, options) { this.Box = $(box);//显示层 this.OverLay = new OverLay(options);//覆盖层 this.SetOptions(options); this.Fixed = !!this.options.Fixed; this.Over = !!this.options.Over; this.Center = !!this.options.Center; this.onShow = this.options.onShow; this.Box.style.zIndex = this.OverLay.zIndex + 1; this.Box.style.display = "none"; //兼容ie6用的属性 if(isIE6){ this._top = this._left = 0; this._select = []; this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); }); } }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Over: true,//是否显示覆盖层 Fixed: false,//是否固定定位 Center: false,//是否居中 onShow: function(){}//显示时执行 }; Extend(this.options, options || {}); }, //兼容ie6的固定定位程序 SetFixed: function(){ this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + "px"; this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + "px"; this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft; }, //兼容ie6的居中定位程序 SetCenter: function(){ this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px"; this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px"; }, //显示 Show: function(options) { //固定定位 this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute"; //覆盖层 this.Over && this.OverLay.Show(); this.Box.style.display = "block"; //居中 if(this.Center){ this.Box.style.top = this.Box.style.left = "50%"; //设置margin if(this.Fixed){ this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px"; this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px"; }else{ this.SetCenter(); } } //兼容ie6 if(isIE6){ if(!this.Over){ //没有覆盖层ie6需要把不在Box上的select隐藏 this._select.length = 0; Each(document.getElementsByTagName("select"), Bind(this, function(o){ if(!Contains(this.Box, o)){ o.style.visibility = "hidden"; this._select.push(o); } })) } //设置显示位置 this.Center ? this.SetCenter() : this.Fixed && this.SetFixed(); //设置定位 this.Fixed && window.attachEvent("onscroll", this._fixed); } this.onShow(); }, //关闭 Close: function() { this.Box.style.display = "none"; this.OverLay.Close(); if(isIE6){ window.detachEvent("onscroll", this._fixed); Each(this._select, function(o){ o.style.visibility = "visible"; }); } } }; </script>
LightBox
内容显示
覆盖select测试
<script> var box = new LightBox("idBox"); $("idBoxCancel").onclick = function(){ box.Close(); } $("idBoxOpen").onclick = function(){ box.Show(); } $("btnOverlay").onclick = function(){ box.Close(); if(box.Over){ box.Over = false; this.value = "打开覆盖层"; } else { box.Over = true; this.value = "关闭覆盖层"; } } $("btnOverColor").onclick = function(){ box.Close(); box.Over = true; if(box.OverLay.Color == "#fff"){ box.OverLay.Color = "#000"; this.value = "白色覆盖层"; } else { box.OverLay.Color = "#fff" this.value = "黑色覆盖层"; } } $("btnOverOpacity").onclick = function(){ box.Close(); box.Over = true; if(box.OverLay.Opacity == 0){ box.OverLay.Opacity = 50; this.value = "全透覆盖层"; } else { box.OverLay.Opacity = 0; this.value = "半透覆盖层"; } } $("btnFixed").onclick = function(){ box.Close(); if(box.Fixed){ box.Fixed = false; this.value = "定位效果"; } else { box.Fixed = true; this.value = "取消定位"; } } $("btnCenter").onclick = function(){ box.Close(); if(box.Center){ box.Center = false; box.Box.style.left = box.Box.style.top = "20%"; box.Box.style.marginTop = box.Box.style.marginLeft = "0"; this.value = "居中效果"; } else { box.Center = true; this.value = "重新定位"; } } </script>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/jiaocheng/23111/
上一篇:
24×25简便计算|简便无刷新文件上传系统
下一篇:
javascript学习指南|javascrip 弹出层登陆代码
相关推荐
json|js 带缩略图纯javascript图片切换代码
【如何有效提升你的职场影响力】如何有效提升凤巢系统的关键字排名管理技巧
【ping命令常用的参数】PHP处理Ping命令获取批量域名的IP
asp.net core_asp.net 在SQL Server 2008集成服务(SSIS)
24×25简便计算|简便无刷新文件上传系统
[asp.net core]asp.net 简便无刷新文件上传系统
长尾关键词如何选|如何做长尾关键词带流量
mysql下载_mysql sql mode
[javascript学习指南]java 在线拍照代码
javascript学习指南|JavaScript 图片滑动切换效果
网友关注
[javascript学习指南]javascript 拖拉缩放效果
[seo优化]seo优化三要素
【新年英语贺卡】新年flash贺卡-朋友举杯共渡春节
[asp.net core]asp.net ui 工具测试
javascript学习指南_JavaScript 颜色梯度和渐变效果
新年英语贺卡|flash贺卡-新年动画祝福flash贺卡下载
javascript学习指南_JavaScript 图片截取效果(仿dedecms ,dz论坛)
基督教歌曲新年祝福|新年祝福电子贺卡下载
[javascript学习指南]javascript 获取文档所有图片
新年贺卡2016_新年贺卡-2010 flash 新年祝福来贺卡下载
热门标签
最新php常用代码
php常用代码
as3 api|as3 火燃烧效果实现代码
php常用代码
phpstudy|php continue和break流程控制语名用法
php常用代码
【sql语句查询】sql复合查询与null对查询结果影响分析
php常用代码
兼容firefox_兼容firefox和Opera,select中添加、修改、删除option元素
php常用代码
csrf-token_c 随机生成字符串或数组方法
php常用代码
css美化select_css美化select表单实现方法代码
php常用代码
【超简单的画】超简单php 大图生成缩略图实现代码
php常用代码
[asp.net core]asp.net ajax 检测用户名是否可用代码
php常用代码
phpstudy|php 获取目录下所有文件实现代码
php常用代码
asp.net core|asp.net ajax 检测用户名是否可用代码
php常用代码热门文章
php常
javascript学习指南|javascrip 弹出层登陆代码
php常
javascript学习指南|javascript 不间断的图片滚动代码
php常
[javascript学习指南]javascript 常用验证正则表达试
php常
[javascript学习指南]JavaScript图片放大效果
php常
纯css的下拉菜单_纯CSS的下拉菜单 支持IE6 IE7 Firefox
php常
javascript学习指南_javascript 超酷简洁漂亮的分页效果
php常
[phpstudy]php 汉字验证码实例代码
php常
asp.net|asp 汉字转换拼音程序
php常
javascript学习指南_javascript 图片漂浮广告代码
php常
自动复制u盘文件_复制文件自动增加版权信息
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有