3顶

js仿LightBox内容显示效果

稿源：互联网 2022-04-09 15:16:20 点击： 2429 撤稿纠错

js仿LightBox内容显示效果，还可以自己选择层后面的背景颜色，非常酷。

以下讨论的是和js 特效相关的js仿LightBox内容显示效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <script> var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 6); function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } Function.prototype.bind = function(object) { var __method = this, args = Array.apply(null, arguments); args.shift(); return function() { return __method.apply(object, args); } } var OverLay = Class.create(); OverLay.prototype = { initialize: function(overlay, options) { this.Lay = $(overlay);//覆盖层 //ie6设置覆盖层大小程序 this._size = function(){}; this.SetOptions(options); this.Color = this.options.Color; this.Opacity = parseInt(this.options.Opacity); this.zIndex = parseInt(this.options.zIndex); this.Set(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Color:"#fff",//背景色 Opacity:50,//透明度(0-100) zIndex:1000//层叠顺序 }; Object.extend(this.options, options || {}); }, //创建 Set: function() { this.Lay.style.display = "none"; this.Lay.style.zIndex = this.zIndex; this.Lay.style.left = this.Lay.style.top = 0; if(isIE6){ this.Lay.style.position = "absolute"; this._size = 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"; }.bind(this); //遮盖select this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>' } else { this.Lay.style.position = "fixed"; this.Lay.style.width = this.Lay.style.height = "100%"; } }, //显示 Show: function() { //设置样式 this.Lay.style.backgroundColor = this.Color; //设置透明度 if(isIE){ this.Lay.style.filter = "alpha(opacity:" + this.Opacity + ")"; } else { this.Lay.style.opacity = this.Opacity / 100; } //兼容ie6 if(isIE6){ this._size(); window.attachEvent("onresize", this._size); } this.Lay.style.display = "block"; }, //关闭 Close: function() { this.Lay.style.display = "none"; if(isIE6){ window.detachEvent("onresize", this._size); } } }; var LightBox = Class.create(); LightBox.prototype = { initialize: function(box, overlay, options) { this.Box = $(box);//显示层 this.OverLay = new OverLay(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 = []; } }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Fixed:false,//是否固定定位 Over:true,//是否显示覆盖层 Center:false,//是否居中 onShow:function(){}//显示时执行 }; Object.extend(this.options, options || {}); }, //兼容ie6的固定定位程序 _fixed: function(){ var iTop = this.Box.offsetTop + document.documentElement.scrollTop - this._top, iLeft = this.Box.offsetLeft + document.documentElement.scrollLeft - this._left; //居中时需要修正 if(this.Center){ iTop += this.Box.offsetHeight / 2; iLeft += this.Box.offsetWidth / 2; } this.Box.style.top = iTop + "px"; this.Box.style.left = iLeft + "px"; this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft; }, //显示 Show: function(options) { //固定定位 if(this.Fixed){ if(isIE6){ //兼容ie6 this.Box.style.position = "absolute"; this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft; window.attachEvent("onscroll", this._fixed.bind(this)); } else { this.Box.style.position = "fixed"; } } else { this.Box.style.position = "absolute"; } //覆盖层 if(this.Over){ //显示覆盖层，覆盖层自带select隐藏 this.OverLay.Show(); } else { //ie6需要把不在Box上的select隐藏 if(isIE6){ this._select = []; var oThis = this; Each(document.getElementsByTagName("select"), function(o){ if(oThis.Box.contains ? !oThis.Box.contains(o) : !(oThis.Box.compareDocumentPosition(o) & 16)){ o.style.visibility = "hidden"; oThis._select.push(o); } }) } } this.Box.style.display = "block"; //居中 if(this.Center){ this.Box.style.top = this.Box.style.left = "50%"; //显示后才能获取 var iTop = - this.Box.offsetHeight / 2, iLeft = - this.Box.offsetWidth / 2; //不是fixed或ie6要修正 if(!this.Fixed || isIE6){ iTop += document.documentElement.scrollTop; iLeft += document.documentElement.scrollLeft; } this.Box.style.marginTop = iTop + "px"; this.Box.style.marginLeft = iLeft + "px"; } 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"; }); } } }; function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } }; if(!isIE){ HTMLElement.prototype.__defineGetter__("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); }); } //拖放程序 var Drag = Class.create(); Drag.prototype = { //拖放对象,触发对象 initialize: function(obj, drag, options) { var oThis = this; this._obj = $(obj);//拖放对象 this.Drag = $(drag);//触发对象 this._x = this._y = 0;//记录鼠标相对拖放对象的位置 //事件对象(用于移除事件) this._fM = function(e){ oThis.Move(window.event || e); } this._fS = function(){ oThis.Stop(); } this.SetOptions(options); this.Limit = !!this.options.Limit; this.mxLeft = parseInt(this.options.mxLeft); this.mxRight = parseInt(this.options.mxRight); this.mxTop = parseInt(this.options.mxTop); this.mxBottom = parseInt(this.options.mxBottom); this.mxContainer = this.options.mxContainer; this.onMove = this.options.onMove; this.Lock = !!this.options.Lock; this._obj.style.position = "absolute"; addEventHandler(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); }); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Limit:false,//是否设置限制(为true时下面参数有用,可以是负数) mxLeft:0,//左边限制 mxRight:0,//右边限制 mxTop:0,//上边限制 mxBottom:0,//下边限制 mxContainer:null,//指定限制在容器内 onMove:function(){},//移动时执行 Lock:false//是否锁定 }; Object.extend(this.options, options || {}); }, //准备拖动 Start: function(oEvent) { if(this.Lock){ return; } //记录鼠标相对拖放对象的位置 this._x = oEvent.clientX - this._obj.offsetLeft; this._y = oEvent.clientY - this._obj.offsetTop; //mousemove时移动 mouseup时停止 addEventHandler(document, "mousemove", this._fM); addEventHandler(document, "mouseup", this._fS); //使鼠标移到窗口外也能释放 if(isIE){ addEventHandler(this.Drag, "losecapture", this._fS); this.Drag.setCapture(); }else{ addEventHandler(window, "blur", this._fS); } }, //拖动 Move: function(oEvent) { //判断是否锁定 if(this.Lock){ this.Stop(); return; } //清除选择(ie设置捕获后默认带这个) window.getSelection && window.getSelection().removeAllRanges(); //当前鼠标位置减去相对拖放对象的位置得到offset位置 var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y; //设置范围限制 if(this.Limit){ //如果设置了容器,因为容器大小可能会变化所以每次都要设 if(!!this.mxContainer){ this.mxLeft = this.mxTop = 0; this.mxRight = this.mxContainer.clientWidth; this.mxBottom = this.mxContainer.clientHeight; } //获取超出长度 var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom; //这里是先设置右边下边再设置左边上边,可能会不准确 if(iRight > 0) iLeft -= iRight; if(iBottom > 0) iTop -= iBottom; if(this.mxLeft > iLeft) iLeft = this.mxLeft; if(this.mxTop > iTop) iTop = this.mxTop; } //设置位置 //由于offset是把margin也算进去的所以要减去 this._obj.style.left = iLeft - (parseInt(this._obj.currentStyle.marginLeft) || 0) + "px"; this._obj.style.top = iTop - (parseInt(this._obj.currentStyle.marginTop) || 0) + "px"; //附加程序 this.onMove(); }, //停止拖动 Stop: function() { //移除事件 removeEventHandler(document, "mousemove", this._fM); removeEventHandler(document, "mouseup", this._fS); if(isIE){ removeEventHandler(this.Drag, "losecapture", this._fS); this.Drag.releaseCapture(); }else{ removeEventHandler(window, "blur", this._fS); } } }; </script> <style> .lightbox{width:300px;background:#FFFFFF; top:20%; left:20%;border:1px solid #ccc;line-height:25px; margin:0;} .lightbox dt{background:#f4f4f4; padding:5px; cursor:move;} </style> <dl id="idBox" class="lightbox"> <dt id="idBoxHead">LightBox </dt> <dd> 选择效果显示 <input name="" type="button" value=" 关闭 " id="idBoxCancel" /> </dd> </dl> <div id="idOverlay"></div> <div style="margin:0 auto; width:700px; border:1px solid #000000;"> <input name="" type="button" value="关闭覆盖层" id="btnOverlay" /> <input name="" type="button" value="黑色覆盖层" id="btnOverColor" /> <input name="" type="button" value="全透覆盖层" id="btnOverOpacity" /> <input name="" type="button" value="取消居中" id="btnCenter" /> 选择效果： <select id="idEffect"> <option value="0">还原效果</option> <option value="4">定位效果</option> <option value="2">设置拖放</option> <option value="6">视框定位拖放</option> </select> <input name="" type="button" value=" 打开 " id="idBoxOpen" /> <script> var box = new LightBox("idBox", "idOverlay", { Center: true }); var drag = new Drag("idBox", "idBoxHead", { mxContainer: document.documentElement, Lock: true }); $("idBoxCancel").onclick = function(){ box.Close(); } $("idBoxOpen").onclick = function(){ box.Show(); } $("idEffect").onchange = function(){ box.Close(); switch (parseInt(this.value)) { case 4 : box.Fixed = true; drag.Lock = true; drag.Limit = false; break; case 2 : box.Fixed = false; drag.Lock = false; drag.Limit = false; break; case 6 : box.Fixed = true;; drag.Lock = false; drag.Limit = true; break; case 0 : default : box.Fixed = false; drag.Lock = true; drag.Limit = false; } } $("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 = "半透覆盖层"; } } $("btnCenter").onclick = function(){ box.Close(); if(box.Center){ box.Center = false; this.value = "设置居中"; } else { box.Center = true; this.value = "取消居中"; } } </script> </div> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于js仿LightBox内容显示效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20081119373.shtml方便下次再访问哦。

·上一篇： JS下拉菜单
·下一篇： 分享一个图片切换的效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

js仿LightBox内容显示效果

文章分类LIST >>返回首页

最新游戏

最新新闻