zoukankan      html  css  js  c++  java
  • 忙里偷闲写的jquery的屏遮层插件

    (基于考虑博友的建议,深刻反省,之前的描述较为矫情,特此干掉,我什么都不说!)

    希望对大家有用 小插件来的,见笑了啊各位,

    代码呈上,测试通过的浏览器有ie6,ie7,ie8, ff,oprea,safari等。 

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     2 <HTML>
     3  <HEAD>
     4   <TITLE> New Document </TITLE>
     5   <META NAME="Generator" CONTENT="EditPlus">
     6   <META NAME="Author" CONTENT="">
     7   <META NAME="Keywords" CONTENT="">
     8   <META NAME="Description" CONTENT="">
     9   <SCRIPT src="./jquery.js" type="text/javascript"></SCRIPT>
    10   <style>
    11      body {margin:0;padding:0;}
    12   </style>
    13  </HEAD>
    14 
    15  <BODY>
    16  <select id="s"><option>测试ie6下select的bug</option></select><br>
    17  基于jquery的屏蔽层插件   create   李涛<br>
    18  兼容浏览器屏蔽层,支持ie6,7,8 ff   chrome  safari oprea等主流浏览器。<br>
    19  使用方法<br>
    20  var o=new $.OverLay({Opacity:10,Color:"red",zIndex:500});<br>
    21  o.Show()显示<br>
    22  o.Close()为关闭该屏蔽层<br>
    23  参数说明 {Opacity:10,Color:"red",zIndex:500} 该参数为屏蔽层配置 Opacity为透明度 color为屏蔽层的颜色zindex为屏蔽层的zindex值<br>
    24  <span style="color:blue">参数可以为空 既var o=new $.OverLay();因为该插件培植有默认项</span>
    25  <br><br><br><br><br>
    26  
    27   <script>
    28 var isIE6 = $.browser.msie && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1== 6);//因为jquery不能很好的判断ie6
    29 (function($){
    30 $.OverLay = (function(){return function(){this.initialize.apply(this, arguments);}})();
    31 $.OverLay.prototype = {
    32   initialize: function(options){
    33     this.SetOptions(options);    
    34     this.Lay = $(document.createElement("div"));
    35     $('body').append(this.Lay)
    36     this.Color = this.options.Color;
    37     this.Opacity = parseInt(this.options.Opacity);
    38     this.zIndex = parseInt(this.options.zIndex);    
    39     this.Lay.css({display:"none", zIndex:this.zIndex,left:0,top:0,position:"fixed","100%",height:"100%"})
    40     if(isIE6){
    41         this.Lay.css({position : "absolute"});
    42         this._resize =(function(object, fun) {
    43                 return function() {
    44                     return fun.apply(object, arguments);
    45                 }
    46             })(this,function(){
    47             this.Lay.css({Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px",height:Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"});
    48             })
    49         
    50         this.Lay.html('<iframe style="position:absolute;top:0;left:0;100%;height:100%;filter:alpha(opacity=0);"></iframe>');
    51     }
    52   },
    53   SetOptions: function(options) {
    54     this.options = {Color:"#666",Opacity:50,zIndex:1000};
    55     jQuery.extend(this.options,options || {});  
    56   },
    57   Show: function() {
    58     if(isIE6){ this._resize(); $(window).resize(this._resize)}
    59     this.Lay.css({backgroundColor:this.Color,display:"block",position:"absolute"})
    60     if($.browser.msie) {this.Lay.css({filter : "alpha(opacity:" + this.Opacity + ")"})} else {this.Lay.css({opacity : this.Opacity / 100})}
    61   },
    62   Close: function() {
    63     this.Lay.css({display : "none"});
    64     if(isIE6){ $(window).resize(function(){})}
    65   }
    66 };})(jQuery)
    67 
    68 
    69 ///下面为调用实例
    70 var o
    71 var open11=function(){
    72    o=new $.OverLay({Opacity:10,Color:"red"});
    73    o.Show();   
    74    setTimeout("o.Close()",3000);  //三秒后关闭该屏蔽层                                    
    75 }
    76    
    77 
    78 </script>
    79   <input type="button" onclick="open11()" value="点击测试,屏蔽层将在三秒后关闭">
    80 
    81  </BODY>
    82 </HTML>

    83  

  • 相关阅读:
    HDU 5033 Building --离线+单调栈
    HDU 5025 Saving Tang Monk --BFS
    Codeforces Round #267 Div.2 D Fedor and Essay -- 强连通 DFS
    Codeforces Round #267 Div2 C George and Job --DP
    POJ 3150 Cellular Automaton --矩阵快速幂及优化
    TopCoder SRM 633 Div.2 500 Jumping
    HDU 4998 Rotate --几何
    一些语言方面的技巧
    HDU 5017 Ellipsoid 模拟退火第一题
    HDU 5015 233 Matrix --矩阵快速幂
  • 原文地址:https://www.cnblogs.com/litao229/p/1515626.html
Copyright © 2011-2022 走看看