WEB前端开发

转载自：http://www.splashnology.com/article/50-new-jquery-plugins-for-web-developers/4141/

In spite of the fact that jQuery was released in January 2006 it still holds its position and it’s not surprising, because of its ability to add various elements without the necessity to write bulky and heavy code. Also, it’s getting even much more easier as the community of developers constantly releases plugins that allow web developers to enhance their projects. And to make your task simpler, in order you could just visit our site and choose some of these useful plugins, we’ve picked the best and the newest jQuery pluginsand listed them below.

Textualizer.js

A jQuery plug-in which transitions through blurbs of text, animating each character.

Download

Impress.js

Impress.js is a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Download

Revolver.js

Revolver is a new content slider that makes no assumptions about your markup. 继续阅读：50 New jQuery Plugins For Web Developers»

jQuery 本身的动画只有停止的功能，一但停止(stop)后就无法自动接着做未做完的动画内容。 因此Pause插件扩充了animate() 的功能，让它可以支持暂停(pause)及恢复(resume)动画。
这个插件覆盖jQuery的默认的animate()方法，任何加载了这个插件的动画都将支持Pause暂停。两个新的不带任何参数的方法被添加到每一个jQuery对象：pause()和resume()。
例如：
$box.hover(function() {
$box.pause();
}, function() {
$box.resume();
});

demo演示地址：http://tobia.github.com/Pause/

项目地址：https://github.com/tobia/Pause

同事啄米鸟前段时间分装的一个方法，见：http://blog.dmtuan.com/?p=486，改了一下做成jQuery插件：

大家在做相册列表的时候可能会遇到这样的情况，用户上传的图片大小不一，长宽不一，然而需求的列表却是固定宽高的如图：

此脚本拟达到以下需求

1. 当图片高或宽超过父容器时截取中间部分显示。
2. 当图片宽高小于父容器时，居中显示。
3. 插件中”width”和”height”两个参数可以设定图片实际输出的宽度。
4. 可以通过样式设置图片的偏移位置，例如.themes2 li a img{ margin-top: -5px; margin-left: -5px}；
5. 第3点和第4点结合可以尽可能的解决一个问题，就是解决图片边缘模糊是造成视觉上的不爽。

demo页面：http://www.css88.com/demo/VMiddleImg/

jQuery  doTimeout插件是延迟执行代码的插件，主要包括延迟，阻止重复执行，支持jQuery的链式调用。

插件主页：http://benalman.com/projects/jquery-dotimeout-plugin/

照着写了几个例子：http://www.css88.com/demo/dotimeout/

jQuery的animate方法对颜色无法做动画效果，例如有个test元素：

<div id="test" style="border: 3px solid #CDCDCD; width: 500px; height: 500px; background-color: #FFFFFF"> 测试元素</div>

我们写一行这样的代码：

$("#test").animate({"backgroundColor":"#FF3300","height":200},5000);

我们可以看到test元素高度会缓慢的变小，而该元素的背景颜色却毫无变化，假设你去对边框做颜色变化的动画效果，也是无法实现的。

再看一下API：http://www.css88.com/jqapi/#p=animate

所有用于动画的属性必须是数字的（除了如下所示）；这些属性如果不是数字的将不能使用基本的jQuery功能。（举个例子，

, 

或者

可以执行动画，但是

不能。）属性值被当作一个像素单位的数字,除非另有说明。单位

 和 

需要指定使用。就是说color，background-color，border-left-color等等这些颜色属性是不能执行动画效果的。

jQuery ui中Effects有一个Color Animation效果（见：http://jqueryui.com/demos/animate/）这里分明能改变文本颜色和背景颜色，看了一下jquery.effects.core.js这个源码，并且抽出源码，改了一个jQuery Color Animations颜色动画插件，对’backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’这几个属性做了动画支持。

见demo页面：http://www.css88.com/demo/Color_Animations/

更多阅读：

http://jquery.offput.ca/highlightFade/

http://www.bitstorm.org/jquery/color-animation/

来源：http://www.designerterminal.com/resource/jquery/css-jquery-dropdown-menu-solutions.html

如果您正在 寻找 一些很酷 的 下拉菜单解决 方案 ， 那么这些要 。今天 ， 我收集了 一些有用的 CSS和jQuery 下拉菜单 解决 方案 。

Creating a pure CSS dropdown menu

Sexy Drop Down Menu w/ jQuery & CSS

  继续阅读：方便的CSS和jQuery下拉菜单解决方案»

在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高，这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候，文本框的高度就自动撑高了，大大改善了体验，这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。如图：

新浪微博：@feiwen8772(我的新浪微博，顺便做个广告，^_^)

腾讯微博：@feiwen8772(我的腾讯微博，顺便做个广告，^_^)

这些在平时的项目中挺实用的，所以抽空封装了一个文本框根据输入内容自适应高度的插件-autoTextarea： 继续阅读：【jQuery插件】autoTextarea-文本框根据输入内容自适应高度»

在众多网友的要求下jQ中文API离线版（air版本）终于整理完成发布了！
只要更新以下内容：

1. 将原来在线版本的jQ中文API AIR客户端版本彻底改成了离线版本；
2. 支持在线升级jQ中文API离线版，由于翻译能力和精力的原因，目前部分条目没有翻译完成，很多条目翻译很糟糕，所以当有API文档调整的时候，jQ中文API离线版将提示您更新最新版本；
3. 美化了一下界面； 继续阅读：jQ中文API离线版下载(适用版本1.4.4，1.5，1.5.1，1.5.2，1.6，1.6.1，1.6.2)»

上个月研究学习了《js判断一个元素是否为另一个元素的子元素》，感觉还挺好用，但是在jQuery应用中还是有很多缺陷，比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展：

//判断:当前元素是否是被筛选元素的子元素
jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};
//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};

使用起来也非常方便：

$(document).click(function(event){
alert($(event.target).isChildOf(".floatLayer"));
});

或者：

$(document).click(function(event){
alert($(event.target).isChildAndSelfOf (".floatLayer"));
});

查看demo：http://www.css88.com/demo/isParent/index1.html

感谢 留痕 网友提交的bug，bug主要原因是我忽视了多个广告轮播和样式重名的问题；经简单的修改已经修复该问题。谢谢 留痕 网友。
==============华丽的分割线================
广告轮播，焦点图效果反反复复写了好几个插件,http://www.css88.com/?s=%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD,http://www.css88.com/archives/2455

这次这个插件主要解决了两个问题:

1.当焦点图只有一张的时候不滚动；

2.当鼠标经过右下角图片选择的控制点上加了延时，避免在用户不经意划过这些控制点的时候切换图片。

具体插件代码：

/**
 * @author 愚人码头
 * User: feiwen
 * Date: 11-7-11
 * Time: 下午4:30
 * Settings:{
 *     speed:滚动速度
 *     timer:滚动的时间间隔
 * }
 */
(function($) {
    $.fn.slideImg = function(settings) {
        settings = jQuery.extend({
            speed: "normal",
            timer: 1000
        }, settings);
        return this.each(function() {
            $.fn.slideImg.scllor($(this), settings);
        });
    };

    $.fn.slideImg.scllor = function($this, settings) {
        var index = 0;
        var scllorer=$(".img-box li",$this);
        var size=scllorer.size();
        var slideH=scllorer.outerHeight();
        var $selItem=$("<ul></ul>",{
            "class":"flash_item",
            html:function(){
                var $selItemHTML="";
                if(size==1){
                    return;
                }else if(size>1){
                    for(var i=0;i<size ;i++){
                        i==0?$selItemHTML+='<li class="on">'+(i+1)+'':$selItemHTML+='<li class="">'+(i+1)+'</li>';
                    }
                    return  $selItemHTML;
                }
            }
        }).appendTo($this);
        var li = $(".flash_item li",$this);
        var showBox = $(".img-box",$this);
        var intervalTime=null;
        li.hover(function() {
            var that=this;
            if (intervalTime) {
                clearInterval(intervalTime);
            }
            intervalTime = setTimeout(function() {
                index = li.index(that);
                ShowAD(index);
            }, 200);
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        showBox.hover(function() {
            if (intervalTime) {
                clearInterval(intervalTime);
            }
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        function interval(){
            intervalTime = setInterval(function() {
                ShowAD(index);
                index++;
                if (index == size) {
                    index = 0;
                }
            }, settings.timer);
        }
        interval();
        var ShowAD = function(i) {
            showBox.animate({ "top": -i * slideH }, settings.speed);
            li.eq(i).addClass("on").siblings().removeClass("on");
        };
    };
})(jQuery);

demo演示地址：http://www.css88.com/demo/slide1/