1.需要两个DIV,一个用来遮罩,另一个用来显示Loading图片和文字(初始时它们是隐藏的) .gdiv_over { display: none; position: absolute; top:; left:; background-color: #f5f5f5; opacity: 0.5; z-index:; border:; } .gdiv_layout { display: none; padding: 5px 5px 0 0; position: absolute; width:…

(function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(function(){ $(this).datagrid("getPager").pagination("loading"); var opts = $(this).datagrid("options"); var wrap = $.data(this,"…

//jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(function(){ $(this).datagrid("getPager").pagination("loading"); var opts = $(this).datagrid("options&qu…

//jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(function(){ $(this).datagrid("getPager").pagination("loading"); var opts = $(this).datagrid("options"); var wra…

项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一下,效果不错.拿来分享 原文地址:jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码 修改后的代码: (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { r…

刚刚来到实习单位,我跟着廖哥做项目.然后他分配给我一个小小的任务,实现起来总的效果如下: 然后,但我们单击显示数目这个链接的时候,就会弹出一个又遮罩效果的对话框,如下图: 当我们在对话框中再点击里面的超链接的时候,就会显示出相关页面的详细信息,总体的效果就是这样子. 正如雷总所说的,这些东西在项目中都是一些小细节,但是不处理又不行,所以, 总要处理一下.虽然这是一个小问题,但是,缺少了的话又不行,不写了,时间好紧啊...…

最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央的部件消失,页面恢复成原来样子. 首先谈谈最简单的实现方式吧.准备两个div,一个是幕布<div class="bg"></div>,另一个是要显示在屏幕正中央的部件<div class="content"></div>,…

原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先上张效果图看看 如果不如您的法眼 可以移步了 或者有更好的效果 可以留言给我  废话不多说 直接贴代码 一个usercontrol <UserControl x:Class="LoadingMask_Demo.LoadingWait" xmlns="http://schem…

效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等 英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net…

以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; PixelXorXfermode; PorterDuffXfermode; 前两种已经不被推荐使用了(据说是因为不支持硬件加速,要生效得强制关闭硬件加速),就不细说了,主要说说第三种,一共提供了十六种效果(as3里也提供了类似,但是更加复杂的方法,所以对我而言还是比较熟悉的),如图所示: 但是要正…

ajax请求时有时需要操作大量的数据,反应有时会很慢,这时我们想要来一个遮罩效果,具体步骤如下 1.定义一个遮罩 var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"数据正在处理中,请稍后..."}); 2.在ajax请求前 myMask.show(); 3.在ajax请求成功函数中 myMask.hide(); 以上即可实现一个遮罩效果…

jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a> <div id="myModal" class="reveal-modal"&g…

接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动加窃喜,因为看到间歇地有一些来自世界各地的访客,那感觉真是乡下二狗子刚进城啊,现在看来好二. Inspired By 首先要介绍的是灵感来自于,嗯,介绍一下还是有必要的,因为创意这东西,有时候比实际的产品更有意义,也让我们反思为毛外国友人们更具创造性,我们的思维太僵化勒! 最初是受到国外某大大写的一…

进行查询的情况下,显示友好的等待效果可以让用户更好的了解目前的状态以及减少用户消极的等待,例如下图所示. VF提供了<apex:actionStatus>标签,,此标签用于显示一个AJAX请求更新的状态.一个AJAX请求状态可以显示为进展或完成. 实现上述效果的主要步骤如下: 1.创建一个Component:StatusSpinner.component 其中需要在salesforce中上传一个静态资源,显示loading的gif图片,有需要的可以进行下载:http://files.cnblo…

下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutableArray alloc] initWithObjects:[UIImage imageNamed:@"1.png"],[UIImage imageNamed:@"2.png"],[UIImage imageNamed:@"3.png"],[UIIm…

一.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者.服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定义遮罩效果,就是本文要讲的内容.效果演示如下:第一张是一个View的遮罩效果,第二张是UIImageView的遮罩效果. 二.实现机制 在每一View的layer层中有一个mask属性,他就是专门来设置该View的遮罩效果的.该mask本身也是一个layer层.我们只需要生成一个自定义的layer,…

Activity文件 package com.app.test02; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.Gravity; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; i…

最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loading动画效果的方法. 方法一:使用UIImageView自带的方法来实现,这也是我推荐的实现方法. NSMutableArray *array = [[NSMutableArray alloc] initWithObjects:[UIImage imageNamed:@"1.png"],[…

先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果:        首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消失. 长按其他条目时,上一个遮罩的条目撤销遮罩,当前长按的显示遮罩: 条目添加遮罩的时添加动画: 1. 遮罩的效果,我们会很容易的想到Android布局控件FrameLayout布局,是基于叠加在上方的布局.所以在列表条目布局的时候,可以使用FrameLayout布局,在长按列表条目时,用条目的根布…

本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <head>    <meta charset=" utf-8">…

本文索引: 需求 原理 实现遮罩控件 遮罩的使用 需求 我们在显示一些模态对话框的时候,往往需要将对话框的背景颜色调暗以达到突出当前对话框的效果,例如: 对话框的父窗口除了标题栏以外的部分都变暗了,在父窗口的对比下对话框的显示效果就得到了强调. 这种设计多见于web页面,当用户点击诸如购买之类的按钮后页面会弹出一个购物清单确认对话框,并将对话框以外的内容用类似图中的效果处理,使用户可以将注意力集中在对话框本身. 今天我们也将使用Qt来实现这一效果. 原理 在介绍具体做法前我想先介绍一点预备知识-…

前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: 0;right: 0;left: 0;bottom: 0; background:rgba(0,0,0,0.8); } .lightbox{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; margin:auto; z-index:1; width…

一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背景颜色,介绍两种方法: 第一种,代码如下: css: .wrap{ position: relative; background: url(i/pic4.jpg) no-repeat; -webkit-background-size: %; background-size: %; } .warp-m…

本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果: 效果预览 第一步.打开Flash新建1个图层,用线条工具画一条竖直线,放在相对舞台的左面,第30帧处插入关键帧. 图1 第二步.点击第30帧把竖直线拉到舞台右面. 图2 第三步.点住任意一帧,在属性里面把补间改为形状. 图3 第四步.新建一个图层,和上面一样画一个竖直线,注意的是这次把竖直线从右…

二.正文 设计师设计了一个图片上传圆环loading进度效果.如下截图: 首先,CSS3是可以实现的,以前写过一篇转大饼的文章:“CSS3实现鸡蛋饼饼状图loading等待转转转”.原理跟这个一模一样,两个半区的矩形,然后不同时机巧妙显隐实现. 但是呢,CSS3实现不太好理解,进度控制也不容易,最好直接数值变一变,进度效果就出来. 有没有其他方法呢? 哈,当然有,可以使用同样IE9+支持的SVG. 我们只需要一个实线背景圆,一个虚线变化圆两个圆就可以了. 百闻不如一见,您可以狠狠地点击这里:SV…

CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层就显示的越多,反之,底层显示越少 1. CSS3属性 CSS3中提供的新属性有(括号为跟background对应类似的属性): -webkit-mask-image:设置遮罩图片地址 -webkit-mask-position: 定义遮罩层的出现位置,可以取值px或百分比,也可以指定为 top le…

一.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者.服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定义遮罩效果,就是本文要讲的内容.效果演示如下:第一张是一个View的遮罩效果,第二张是UIImageView的遮罩效果.  二.实现机制 在每一View的layer层中有一个mask属性,他就是专门来设置该View的遮罩效果的.该mask本身也是一个layer层.我们只需要生成一个自定义的layer…

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)➤GitHub地址:https://github.com/strengthen/LeetCode➤原文地址:https://www.cnblogs.com/strengthen/p/10260084.html ➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章…

设计师设计了一个图片上传圆环loading进度效果.如下截图: 首先,CSS3是可以实现的,以前写过一篇转大饼的文章:“CSS3实现鸡蛋饼饼状图loading等待转转转”.原理跟这个一模一样,两个半区的矩形,然后不同时机巧妙显隐实现. 但是呢,CSS3实现不太好理解,进度控制也不容易,最好直接数值变一变,进度效果就出来. 有没有其他方法呢? 哈,当然有,可以使用同样IE9+支持的SVG. 我们只需要一个实线背景圆,一个虚线变化圆两个圆就可以了. 百闻不如一见,您可以狠狠地点击这里:SVG实现圆环…

text-shadow 其实这东西,跟  box-shadow 差不多,没啥好说的不懂的话,点这里→  css3系列之详解box-shadow  . 它只有 四个参数 x(第一个值设置x位置) y(第二个值设置y位置) blur(第三个值,设置阴影模糊程度) color(第四个值,设置阴影颜色) 它跟 box-shadow 的差别就是,没有 外阴影和 内阴影之分. text-shadow 只有外阴影,也就是 文字下面的阴影. 本章呢,来利用他实现几个 小应用: 浮雕效果:凸出来 镂空效果:凹进去…