`
三里小龙
  • 浏览: 87597 次
  • 性别: Icon_minigender_1
  • 来自: 孝感
社区版块
存档分类
最新评论

遮罩简单实现

    博客分类:
  • Web
阅读更多

使用jQuery插件blockUI达到遮罩,当然还有其他更炫的插件(thickBox,stanlemon等),在此不做描述。

 

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>jQuery Block-UI (^_^)</title>

<meta http-equiv="Content-Type" content="text/html">

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">    

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="jQuery Block UI">

<!-- Dao ru xiang ying de bao: css,jQuery core,jQuery blockUI -->

<link rel="stylesheet" type="text/css" media="screen" href="ui/jquery-ui-1.7.2.redmond.css" />

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="js/jquery.blockUI.js"></script>

<style type="text/css">

input {

border: 1px groove #eee;

font-size: 12px;

}

button {

border: 1px groove #eee;

cursor: pointer;

}

div.growlUI {

background: url(./img/check.jpg) no-repeat 10px 10px 

}

div.growlUI h1, div.growlUI h2 {

color: white;  

padding: 5px 5px 5px 75px;  

text-align: left 

}

div.growlUI h2 {  

font-size: medium  

}

</style>

<script type="text/javascript">

<!--

$(document).ready(function() {

//login 

   $('#btnLogin').click(function() { 

       $.blockUI({ message: $('#login') }); 

       //setTimeout($.unblockUI, 2000); 

   }); 

   $('#btnLoginCancle').click(function() { 

       $.unblockUI('#login'); 

   }); 

   //-------------------------------------------

   

   //wait

$('#btnWait').click(function() { 

       $.blockUI({ css: { 

           border: 'none', 

           padding: '15px', 

           backgroundColor: '#000', 

           '-webkit-border-radius': '10px', 

           '-moz-border-radius': '10px', 

           opacity: .5, 

           color: '#fff' 

       } }); 

       setTimeout($.unblockUI, 2000); 

});

//-------------------------------------------

//overlay   

$('#btnOverlay').click(function() { 

       $.blockUI({ overlayCSS: { backgroundColor: '#336699' } }); 

       setTimeout($.unblockUI, 2000); 

   });

   //-------------------------------------------

   

   //tall content

$('#btnTallContent').click(function() { 

       $.blockUI({ 

           message: $('#tallContent'), 

           css: { top: '20%' } 

       }); 

       setTimeout($.unblockUI, 2000); 

});

//-------------------------------------------

//image box

$('#btnImageBox').click(function() { 

       $.blockUI({ 

           message: $('#imageBox'), 

           css: { 

               top:  ($(window).height() - 400) /2 + 'px', 

               left: ($(window).width() - 400) /2 + 'px', 

               width: '100px' 

           } 

       }); 

       setTimeout($.unblockUI, 2000); 

});

//--------------------------------------------

 

//none centered message

$('#btnNoneCentered').click(function() { 

       $.blockUI({ 

           centerY: 0, 

           css: { top: '10px', left: '', right: '10px' } 

       }); 

       setTimeout($.unblockUI, 2000); 

});

//--------------------------------------------

//null message

$('#btnNullMessage').click(function() { 

       $.blockUI({ message: null }); 

       setTimeout($.unblockUI, 2000); 

});

//--------------------------------------------

//on unblock callback

$('#btnOnUnblock').click(function() { 

       $.blockUI(); 

       setTimeout(function() { 

           $.unblockUI({ 

               onUnblock: function(){ 

                alert('useful when using fadeOut option as it is invoked when all the blocking elements have been removed)'); 

               } 

           }); 

       }, 2000); 

});

//--------------------------------------------

//click overlay to block

$(document).ready(function() { 

   $('#btnClickOverlayToBlock').click(function() { 

       $.blockUI(); 

       $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI); 

   }); 

}); 

//--------------------------------------------

//auto-unblock: sets a timer to unblock after a specified timeout.

$('#btnAutoUnblock').click(function() { 

       $.blockUI({ 

           message: '<h3>Auto-Unblock!</h3>', 

           timeout: 2000 

       }); 

});

//--------------------------------------------

 

//growl: the hard way.

//Maybe some style I cannot import from the office site, but the effect is the same as 'btnGrowlEasy'.

$('#btnGrowlHard').click(function() { 

       $.blockUI({ 

           message: $('div.growlUI'), 

           fadeIn: 700, 

           fadeOut: 700, 

           timeout: 2000, 

           showOverlay: false, 

           centerY: false, 

           css: { 

               width: '350px', 

               top: '10px', 

               left: '', 

               right: '10px', 

               border: 'none', 

               padding: '5px', 

               backgroundColor: '#000', 

               '-webkit-border-radius': '10px', 

               '-moz-border-radius': '10px', 

               opacity: .6, 

               color: '#fff' 

           } 

       }); 

}); 

     //--------------------------------------------

//easy growl

$('#btnGrowlEasy').click(function() { 

      $.growlUI('Growl Notification', 'Have a nice day!'); 

});

//--------------------------------------------

 

//jQuery UI Theme

$('#btnUITheme').click(function() { 

       $.blockUI({ 

           theme:     true, 

           title:    'This is your title', 

           message:  '<p>This is your message.</p>', 

           timeout:   2000 

       }); 

});    

     //--------------------------------------------

             

//onBlock callback

//this may occur error,but I don't know how to solve it.If you recognize that,please send a feedback,pengyou(^_^)! 

$('#btnOnBlock').click(function() { 

$.blockUI({ 

           fadeIn: 1000, 

           timeout:   2000, 

           onBlock: function() { 

               alert('Page is now blocked; fadeIn complete'); 

           } 

}); 

         });    

     //--------------------------------------------

             

}); 

   

//-->

</script>

  </head>

  <body>

  <!-- buttons -->

  <button id="btnLogin">login</button>

  <button id="btnWait">wait</button>

  <button id="btnOverlay">overlay</button>

  <button id="btnTallContent">tallContent</button>

  <button id="btnImageBox">imageBox</button>

  <button id="btnNoneCentered">noneCentered</button>

  <button id="btnNullMessage">nullMessage</button>

  <button id="btnOnUnblock">onUnblock</button>

  <button id="btnClickOverlayToBlock">clickOverLayToBlock</button>

  <button id="btnAutoUnblock">autoUnblock</button>

  <button id="btnGrowlHard" title="Mei you xiao guo,but he btnGrowlEasy yi yang.">growlHard</button>

  <button id="btnGrowlEasy" title="Tu pian ke neng chu bu lai,because yin yong de shi jue dui lu jing, hehe.">growlEasy</button>

  <button id="btnUITheme">uiTheme</button>

  <button id="btnOnBlock" title="It can occur CuoWu!">onBlock</button>

 

 

  <!-- layers -->

    <!-- login -->

    <div id="login" style="display:none;border:1px solid #336699;">

     Account: &nbsp;<input type="text"/><br/>

     Password: <input type="password"/><br/>

     <button>Enter</button>&nbsp;<button id="btnLoginCancle">Quit</button>

    </div>

 

<!-- tall content -->

    <div id="tallContent" style="display:none;border:1px solid #ee66FF;">

     <h3>Sunny<br/>So<br/>Long</h3>

    </div>

 

<!-- image box -->

    <div id="imageBox" style="display:none;border:1px solid #CC66FF;">

     <img src="http://img2.zol.com.cn/product/5/96/cejCWzKmTAw.jpg" width="300" height="200" alt="JiaFeiMao猫">

    </div>

 

 

  </body>

</html>


0
1
分享到:
评论

相关推荐

    Qt之实现遮罩窗口,实现了窗口遮罩效果

    在Qt编程中,实现遮罩窗口(mask window)是一种常见的需求,主要用于在界面操作时提供视觉提示或防止用户误操作。遮罩窗口通常是一个半透明的覆盖层,它允许底层窗口的部分可见,但限制用户的交互。本文将详细介绍...

    js图片遮罩效果实现

    以上是一个简单的JavaScript图片遮罩效果实现。在实际项目中,可能需要根据需求添加更多功能,如自适应屏幕尺寸、手势操作等。通过深入学习JavaScript和CSS,你可以创建出更加复杂且具有交互性的图片遮罩效果。记得...

    iOS简单实现遮罩层

    本教程将详细介绍如何在iOS中简单实现遮罩层。 首先,我们来看一下`MaskView.h`头文件。这个文件定义了一个名为`MaskView`的自定义视图类,它是`UIView`的子类。在iOS中,`UIView`是所有视图的基础,它负责管理视图...

    CALayer.Mask(遮罩)实现iphone图标的水晶立体效果

    通过使用 CALayer 的遮罩(Mask)功能,我们可以轻松地实现 iphone 图标的水晶立体效果。下面,我们将详细介绍如何使用遮罩来实现这种效果。 首先,让我们了解一下什么是遮罩(Mask)。在图形编程中,遮罩是一个...

    HTML遮罩层实现源码

    一个简单的遮罩层通常包含一个主要的容器元素,如`div`,该元素具有`id`或`class`以便通过CSS和JS进行引用。此外,还可能有一个或者多个子元素,如`div`模拟的模态窗口或`img`元素显示加载动画。 ```html &lt;!DOCTYPE...

    Cesium地图反选遮罩,支持自定义遮罩颜色

    Cesium地图反选遮罩,支持自定义遮罩颜色

    Javascript实现的遮罩层

    在HTML中,我们可以创建一个简单的div元素作为遮罩层的基础结构: ```html &lt;div id="mask"&gt;&lt;/div&gt; ``` 接下来,我们用CSS来定义遮罩层的样式,使其占据整个屏幕并设置为半透明黑色: ```css #mask { position: ...

    (HTML+js+css)遮罩层实现源码

    一个简单的遮罩层通常包含一个主容器(例如一个`div`元素)以及可能的子元素,如模态窗口或加载指示器。下面是一个基础的HTML布局: ```html &lt;!DOCTYPE html&gt; 遮罩层实现 &lt;!-- 页面主要内容 --&gt; ...

    JS简单实现点击按钮或文字显示遮罩层的方法

    本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;...

    QT实现半透明遮罩Demo

    下面是一个简单的实现步骤: 1. 创建一个继承自QWidget的类,作为遮罩层。在构造函数中设置背景颜色(比如灰色)和透明度(通过QColor的alpha通道设置)。 2. 在该类中覆盖`paintEvent()`方法,使用QPainter绘制...

    unity3D 新手引导遮罩,支持圆形和矩形框

    2. **矩形遮罩**:矩形遮罩的实现相对简单,我们只需要在Shader中设置一个矩形区域的剪裁即可。这可以通过比较像素坐标与矩形边界来实现,对超出边界的像素赋予全透明。 为了使遮罩适应不同分辨率的设备,我们需要...

    卫班科技---HTML+CSS遮罩层实现案例

    例如,可以使用`transition`和`animation`属性实现遮罩层的平滑显示和隐藏。此外,`position`属性(如`fixed`或`absolute`)可以确保遮罩层始终位于页面的最前端,即使用户滚动页面也是如此。`z-index`属性则用来...

    CocosCreator 正多边形遮罩Shader

    在CocosCreator 2.4.7中,正多边形遮罩Shader是一种技术,用于将精灵(Sprite)渲染成正多边形形状,从而实现更高效和灵活的图形裁剪效果。相比于传统的mask裁剪,它能降低DrawCall,提高游戏性能。DrawCall是图形...

    实现div 遮罩 frameset

    在这个场景中,“实现div 遮罩 frameset”意味着在`frameset`布局的网页上,使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先,我们来看`frameset`。`frameset`是HTML4中的元素,它允许我们将浏览器窗口划分为...

    JavaScript实现网页遮罩效果

    下面是一个简单的JavaScript实现网页遮罩的步骤: 1. **创建HTML结构**:首先,我们需要在HTML中添加一个遮罩元素。这个元素通常是全屏的div,具有相对或绝对定位,以及透明度设置,如以下示例: ```html ; top: ...

    C# 自定义半透明遮罩层

    在C#编程中,创建一个自定义的半透明遮罩层是常见的需求,尤其是在开发桌面应用或者游戏界面时,为了实现部分区域的视觉隔离或加载等待效果。本教程将介绍如何利用C#来构建这样的功能。 首先,我们需要理解遮罩层的...

    利用Jquery几行代码实现遮罩层

    Jquery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果,使得实现遮罩层变得非常简单。本教程将详细讲解如何利用Jquery几行代码快速实现遮罩层。 首先,确保你的HTML文件中已经包含了Jquery库。...

    html几行代码实现简单遮罩框

    简单几行代码实现web页面遮罩框功能带等待图片 。 -洋

    Unity UI Soft Mask - 实现Sprite精灵遮罩

    通过软遮罩,你可以使特定区域的内容逐渐淡出,而不是简单地切断,这增加了游戏或应用的用户体验。 资源非插件,意味着它是Unity原生支持的一部分,无需额外安装第三方插件。用户只需将解压后的文件夹导入到Unity...

    js+html5实现半透明遮罩层弹框效果

    通过以上知识点,我们可以构建一个简单的半透明遮罩层弹框效果。用户点击按钮后,页面中会展示一个半透明的遮罩层,并且遮罩层上包含一些提示性内容。这样的实现方式在用户界面设计中非常常见,既美观又能很好地与...

Global site tag (gtag.js) - Google Analytics