jQuery AnimateMask 动态遮罩

meteor
发表于August 16, 2008 引用通告(0) 评论(2)
基于jQuery animate封装的一个动态遮罩效果
支持easing库
支持maskIn/maskOut效果设置（有高度渐变、宽度简便、从各个角度进入/退出）
支持遮罩层颜色设置、透明度设置
支持进入、退出速度设置

具体使用方法：
$("#threeimg").animateMask("#four",500,{easing:'backout',maskIn:"heightIn",maskOut:"widthOut",
duration:"slow",color:"#f00",opacity:"0.5"});

$("#threeimg")为鼠标hover事件的对象

"#four"为出现动态遮罩的对象

maskIn/maskOut为进入、退出的效果设置（具体效果有heightIn、widthIn、lefttopIn、righttopIn、leftbottomIn、rightbottomIn和heightOut、widthOut、lefttopOut、righttopOut、leftbottomOut、rightbottomOut，默认效果为从遮罩对象中部变大出现，然后淡出）

duration为退出时的速度设置

color设置遮罩层的颜色

opacity设置遮罩层的透明度

http://jqueryplugin.googlecode.com/files/AnimateMask.zip

分类:

标签:

引用通告(0)

引用此文，请复制下面的链接，放置到您发表文章时的相应界面中：

http://www.thinkjam.org/loveblog/trackbacktj.cgi/1181

评论(2)

jax 于 August 19, 2008 3:23 AM

不错的效果，友情支持一下 :-)

JohnsonKarin26 于 April 14, 2010 5:25 AM

If you are willing to buy a car, you will have to get the mortgage loans. Furthermore, my mother commonly utilizes a consolidation loan, which supposes to be the most firm.

发表评论


Type the characters you see in the picture above.

最新发布

jQuery AnimateMask 动态遮罩
基于jQuery animate封装的一个动态遮罩效果支持easing库支持maskIn/maskOut效果设置（有高度渐变、宽度简便、从各个角度进入/退出）支持遮罩层颜色设置、透明度设置支持进入、退出速度设置具体使用方法：$("#threeimg").animateMask("#four",500,{easing:'backout',maskIn:"heightIn",maskOut:"widthOut",duration:"slow",color:"#f00",opacity:"0.5"});$("#threeimg")为鼠标hover事件的对象"#four"为出现动态遮罩的对象maskIn/maskOut为进入、退出的效果设置（具体效果有heightIn、widthIn、lefttopIn、righttopIn、leftbottomIn、rightbottomIn和heightOut、widthOut、lefttopOut、righttopOut、leftbottomOut、rightbottomOut，默认效果为从遮罩对象中部变大出现，然后淡出）duration为退出时的速度设置color设置遮罩层的颜色opacity设置遮罩层的透明度http://jqueryplugin.googlecode.com/files/AnimateMask.zip…
By meteor | 评论 (2)
jQuery FlyTo效果
从一个地方飞到另一个地方把jQuery的animate方法封装了一下，支持设置fly时间、是否fade away，支持easing库，支持回调具体使用方法：    $("#from").flyTo("#to",1000,{fade:'true',easing:'backout',callback:function(){       ended();                  }});ended(); 是回调时调用的函数，fade为true在fly的同时会慢慢消失http://jqueryplugin.googlecode.com/files/FlyTo.zip…
By meteor | 评论 (0)
jQuery checkbox 全选/反选
项目开发时要用到全选/反选，于是随手写了一个插件，适用于jQuery1.2.2之后的版本使用方法:js里面加入  $(document).ready(function(){   var chk_options = {     invert:'#invert',    //反选框id,可以使用jQuery支持的格式    all:'#checkAll',    //全选框id,可以使用jQuery支持的格式    item:'.checkitem'    //被操作的CheckBox,可以使用jQuery支持的格式   };   $(this).chk_init(chk_options);  });在html页面中相应的位置加上上面的属性即可，如下：        <div>        <input type="checkbox" class="checkitem"/>A<br />        <input type="checkbox" class="checkitem"/>B<br />        <input type="checkbox" class="checkitem"/>C<br />        <input type="checkbox"…
By meteor | 评论 (1)