Recently in 前端 Category

jQuery AnimateMask 动态遮罩

| Comments | No TrackBacks
基于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

jQuery FlyTo效果

| Comments | No TrackBacks
从一个地方飞到另一个地方
把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

jQuery checkbox 全选/反选

| Comment | No TrackBacks

项目开发时要用到全选/反选,于是随手写了一个插件,适用于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" class="checkitem"/>D<br />
        <input type="checkbox" class="checkitem"/>E<br />
        <input type="checkbox" class="checkitem"/>F<br />
        <input type="checkbox" class="checkitem"/>G<br />
        </div>
        <div id="div2">
        <input type="checkbox" id="checkAll"/>CheckAll
        &nbsp;&nbsp
        <input type="checkbox" id="invert"/>Invert
        </div>

下载地址:
http://jqueryplugin.googlecode.com/files/CheckBox.zip

SproutCore

| Comments | No TrackBacks
SproutCore被形容为"开源,跨平台,类Cocoa创意的JavaScript架构,能够创造拥有桌面应用程序外观和操作感的网页应用。"

今天看了一下,还不是很成熟,等待完善版本

http://www.sproutcore.com/

About this Archive

This page is an archive of recent entries in the 前端 category.

Find recent content on the main index or look in the archives to find all content.

Categories

  • 数据分析
  • Database
  • 架构
  • 算法
  • 前端 (4)
  • 系统

Pages

  • About
  • Contact
OpenID accepted here Learn more about OpenID
Powered by Movable Type 5.12