WEB前端开发

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/

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

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

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

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

感谢 留痕 网友提交的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/

在文本框光标位置插入内容在实际的项目应用中经常用到，比如在文本框插入表情，首先要获取光标在文本框中的位置，当然这个有浏览器兼容性问题。

IE下可以通过document.selection.createRange();获取光标位置，代码也很简单：

if (document.selection) {
    pos = document.selection.createRange();
    pos.text = "要插入的字符串";
}

Firefox浏览器则稍微负责一点，需要首先获取光标位置，然后对value进行字符串截取处理。

if (obj.selectionStart || obj.selectionStart == '0') { //obj是文本框对象
    var startPos = obj.selectionStart;
    var endPos = obj.selectionEnd;
    obj.value = obj.value.substring(0, startPos) + "要插入的字符串" + obj.value.substring(endPos, obj.value.length);
    obj.selectionStart = startPos + myValue.length;
    obj.selectionEnd = startPos + myValue.length;
} else {
    obj.value += "要插入的字符串";
}

这些可以查看Javascript在光标位置插入内容；

现在微博很火，我们可以尝试一下插入话题，你点击话题，在光标位置就会插入：#请在这里输入自定义话题#，注意，“请在这里输入自定义话题”这几文字是被选中，你可以直接敲打键盘编辑文本。
在火狐下先对比较简单，我们只要在上面的代码中插入一句就可以了：
obj.setSelectionRange(startPos-t,obj.selectionEnd+t);
t是根据数值选中插入文本内容两边的边界数值，如：0是表示插入文字全部选择，-1表示插入文字两边各少选中一个字符。 继续阅读：【jQuery插件】insertContent-在文本框光标位置插入内容并选中»

PS:此插件存在性能问题，请慎用！敬请期待新插件，预计6月发布！

项目中有一个类似于新浪腾讯微博文本域字符数判断，就是想腾讯微博和新浪微博那样，判断文本框中最多嫩输入140个字，将中文视为一个字符，将英文视为半个字符，也就是两个英文字符按一个字符计算。如果超出就提示！并且实时提示可是输入的文字数。

去年也曾经写过类似一个脚本（http://www.css88.com/archives/2027），只是将上次的代码封装成了jquery插件，做了一点点的性能优化，主要是在文本域获取焦点的时候触发setInterval，文本域失去焦点就clearInterval。
调用方式： 继续阅读：【jQuery插件】chackTextarea-类似于新浪腾讯微博文本域字符数判断»

公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果，例如：

这个在很早以前其实已经写过，请移步：http://www.css88.com/archives/1943

当浏览器滚动的时候，要浮层要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了，position：fixed，可以在IE7+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，使用position：absolute属性代替，重新计算top值。

具体代码如下：

/**
 * @author 愚人码头
 * 类似于新浪微博新消息提示的定位框
 * 更多http://www.css88.com/archives/3515
 */
(function($){
    $.fn.capacityFixed = function(options) {
        var opts = $.extend({},$.fn.capacityFixed.deflunt,options);

        var FixedFun = function(element) {
            var top = opts.top;
            var right = ($(window).width()-opts.pageWidth)/2+opts.right;
            element.css({
                "right":right,
                "top":top
            });
            $(window).resize(function(){
                var right = ($(window).width()-opts.pageWidth)/2+opts.right;
                element.css({
                    "right":right
                });
            });
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {

                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                }else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
            element.find(".close-ico").click(function(event){
                element.remove();
                event.preventDefault();
            })
        };
        return $(this).each(function() {
            FixedFun($(this));
        });
    };
    $.fn.capacityFixed.deflunt={
	right : 100,//相对于页面宽度的右边定位
        top:100,
        pageWidth : 960
	};
})(jQuery)

调用：

$("#float").capacityFixed({
	right : 100,//相对于页面宽度的右边定位
        top:100,
        pageWidth : 960
	});

查看demo：http://www.css88.com/demo/capacityFixed/

前段时间领导给我看了一个网站：http://pinterest.com/，
Pinterest 这个名字还算容易理解：「Pin」就是用图钉往墙上钉东西，「interest」就是趣味。

通过 Pinterest ，你可以：
1) 发现有趣的图片——设计、摄影、产品、新闻——并刺激灵感；
2) 将有趣的图片归类——tag、board、category、source——并分享给好友。

一打开Pinterest你会被那些漂亮的图片和网站的杂志风格所吸引。非常强的视觉冲击。
当然今天不是讨论产品的东西，Pinterest的布局非常有意思，按照列排，宽度自适应。正好知道jquery有个叫Masonry的插件,这个插件非常合适做Pinterest类似的布局，而且非常简单。我做了一个简单的类似Pinterest布局的demo，html和css是Pinterest的。

查看demo：http://www.css88.com/demo/jquery-masonery/；

jQuery Masonry插件的参数也很简单：

$('#wrapper').masonry({

  singleMode: false,
  // 禁用测量每个浮动元素的宽度。
  // 如果浮动元素具有相同的宽度，设置为true。
  // 默认： false

  columnWidth: 240,
  // 1列网格的宽度，单位为像素（px）。
  // 默认： 第一个浮动元素外宽度。

  itemSelector: '.box:visible',
  // 附加选择器，用来指定哪些元素包裹的元素会重新排列。

  resizeable: true,
  // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动.
  // 默认：true

  animate: true,
  // 布局重排动画。
  // 默认：false

  animationOptions: {},
  // 一对动画选项，具体参数可以参考jquery .animate()中的options选项，见：http://www.css88.com/jqapi/#p=animate

  appendedContent: $('.new_content'),
  //  附加选择器元素，用来尾部追加内容。
  // 在集成infinitescroll插件的情况下使用。

  saveOptions: true,
  // 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项
  // 默认：true

},  function() {}
  // 可选择的回调函数
  // 'this'将指向重排的Masonry适用元素
);

更多关于masonry的demo参见http://desandro.com/resources/jquery-masonry/