sgamerv

博客园 首页 新随笔 联系 订阅 管理
学习笔记_JavaScript 仿LightBox内容显示效果

早先在没有jquery的时候，以下的代码体现了框架的概念，且其中创建类或说是构造函数的方式很不错，自己在看完代码后用jquery来实现了下，对jquery对象也有了 更深刻的了解，先上代码学习

<!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>JavaScript 仿LightBox内容显示效果</title>
</head>

<body>

<br /><br /><br /><br />



<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 = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'
    }
  },
  //设置默认属性
  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();
    $("result_w").innerHTML="marginTop:"+this.Box.style.marginTop;
  $("result_h").innerHTML="marginLeft:"+this.Box.scrollHeight;
  },
  //关闭
  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>


<style>
.lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px;top:20%;left:20%;}
.lightbox dt{background:#f4f4f4; padding:5px;}
</style>

<dl id="idBox" class="lightbox">
  <dt id="idBoxHead"><b>LightBox</b> </dt>
  <dd>
    内容显示
    <br /><br />
    <input name="" type="button" value=" 关闭 " id="idBoxCancel" />
    <br /><br />
  </dd>
</dl>


<div style="margin:0 auto; width:900px; height:1000px; border:1px solid #000000;">

<input type="button" value="关闭覆盖层" id="btnOverlay" />
<input type="button" value="黑色覆盖层" id="btnOverColor" />
<input type="button" value="全透覆盖层" id="btnOverOpacity" />
<input type="button" value="定位效果" id="btnFixed" />
<input type="button" value="居中效果" id="btnCenter" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<select>
<option>覆盖select测试</option>
</select> 
<input name="" type="button" value=" 打开 " id="idBoxOpen" />
<div id="result_w"></div>
<div id="result_h"></div>
</div>



<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>

</body>
</html>


自己用jquery来实现

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5         <script type="text/javascript" language="JavaScript" src="js/jquery-1.7.2.js" charset="utf-8"></script>
  6         <style type="text/css">            
  7             .lightbox
  8             {
  9                 width: 300px;
 10                 line-height:25px;
 11                 background:#FFFFFF;
 12                 border:1px solid #ccc;
 13                 top:20%;
 14                 left:20%;
 15             }    
 16             
 17             .lightbox dt
 18             {
 19                 background:#f4f4f4;
 20                 padding:5px;
 21             }
 22         </style>            
 23     </head>
 24     <body>
 25         <div style="margin:0 auto; width:900px; height:1000px; border:1px solid #000000;">
 26             <input type="button" value="定位效果" id="btnFixed" />
 27             <input type="button" value="居中效果" id="btnCenter" />
 28             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 29             <select>
 30             <option>覆盖select测试</option>
 31             </select> 
 32             <input name="" type="button" value=" 打开 " id="boxOpen" />
 33         </div>
 34         <dl id="idBox" class="lightbox">
 35             <dt><b>LightBox</b></dt>
 36             <dd>
 37                 点击显示Overlay
 38                 <div id="result"></div>
 39                 <input type="button" value="关闭" id="boxCancel">                
 40             </dd>
 41         </dl>
 42         <script type="text/javascript">
 43             var isIE = (document.all) ? true:false;
 44             
 45             var Factory = {
 46                 create:function(){
 47                     return function(){
 48                         this.initialize.apply(this,arguments);
 49                     };
 50                 }
 51             }
 52             
 53             var Overlay=Factory.create();
 54             Overlay.prototype={
 55                 initialize:function(){
 56                     this.setOptions();
 57                     this.lay = $("<div>").insertBefore("body");
 58                     this.color=this.options.color;
 59                     this.opacity = parseInt(this.options.opacity);
 60                     this.zIndex = parseInt(this.options.zIndex);
 61                     this.lay.css({"display":"none","zIndex":this.zIndex,"left":"0","top":"0","position":"fixed","width":"100%","height":"100%"});
 62                 },
 63                 setOptions:function(){
 64                     this.options={
 65                         //lay: null,
 66                         color: "#000",
 67                         opacity: 50,
 68                         zIndex:1000
 69                     }
 70                 },
 71                 show:function(){                    
 72                         isIE ? this.lay.css("filter","alpha(opacity:" + this.opacity + ")") : this.lay.css("opacity",this.opacity / 100);
 73                         this.lay.css({"backgroundColor":this.color,"display":"block"});
 74                 },
 75                 close:function(){
 76                     this.lay.css("display","none");
 77                 }
 78             }
 79             
 80             
 81             var Box = Factory.create();
 82             Box.prototype = {
 83                 initialize:function(box){
 84                     this.box=$(box);
 85                     this.myOverlay = new Overlay();
 86                     this.setOptions();
 87                     this.zIndex = this.myOverlay.zIndex+1;
 88                     this.height = this.box.innerHeight();
 89                     this.width = this.box.innerWidth();
 90                     this.Over=!!this.options.Over;
 91                     this.Fixed = !!this.options.Fixed;
 92                     this.Center = !!this.options.Center;
 93                     this.box.css({"zIndex":this.zIndex,"display":"none"});                    
 94                 },
 95                 setOptions:function(){
 96                         this.options={
 97                             Over:true,
 98                             Fixed:false,
 99                             Center:false
100                         }
101                 }    ,
102                 setCenter:function(){
103                     //注意这里获得scrollTop所选择的对象
104                     this.box.css({"margin-top":$(document).scrollTop()-this.height/2,"margin-left":$(document).scrollLeft()-this.width/2})
105                 },
106                 show:function(){
107                     this.box.css("position",this.Fixed?"fixed":"absolute");
108                     this.Over&&this.myOverlay.show();
109                     if(this.Center)
110                     {
111                         this.box.css({"top":"50%","left":"50%"});
112                         this.setCenter();
113                     }
114                     this.box.css("display","block");
115                 },
116                 close:function(){
117                     this.box.css("display","none");
118                     this.myOverlay.close();
119                 }
120             }
121             
122             
123             var box = new Box("#idBox");
124             $("#boxOpen").click(function(){
125                     box.show();
126                     $("#result").text("height:"+$("#idBox").innerHeight());
127             });
128             
129             $("#boxCancel").click(function(){
130                     box.close();
131             });
132             
133             $("#btnFixed").click(function(){
134                     box.close();
135                     if(box.Fixed){
136                         box.Fixed=false;
137                         $(this).val("定位效果");
138                     }else{
139                         box.Fixed=true;
140                         $(this).val("取消定位");
141                     }
142             });
143             
144             $("#btnCenter").click(function(){
145                 box.close();
146                 if(box.Center){
147                     box.Center = false;
148                     $(this).val("居中效果");
149                     box.box.css({"top":"20%","left":"20%","margin_top":"0","margin-left":"0"});
150                 }else{
151                     box.Center = true;
152                     $(this).val("取消居中");
153                 }
154             });
155         </script>
156     </body>
157 </html>

 

posted on 2012-04-11 17:26  sgamerv  阅读(342)  评论(0)  编辑  收藏  举报