发布于

jQuery放大镜CloudZoom插件分析，反编译

1. 分析，打开CloudZoom.js，发现是十六进制混淆：

console.log('\x46\x75\x6E\x63\x74\x69\x6F\x6E');
console.log('\x72\x65\x76\x65\x72\x73\x65');
console.log('\x6A\x6F\x69\x6E');

2. 反编译：

var zoom_str = ['...'];
(new Function(zoom_str.reverse().join('')))();
console.log(zoom_str.reverse().join(''));

3. Enjoy it…

附上已破解的源文件：cloudzoom

发布于

IE下实现placeholder效果的jquery插件

html5让前端开发人员省了不少事，但令人恼火的是有很多属性或标签IE都不支持，今天介绍一个超强的让IE下支持placeholder的属性插件,代码如下：

var doc = document,
inputs = doc.getElementsByTagName('input'),
supportPlaceholder = 'placeholder' in doc.createElement('input'),
placeholder = function(input) {
    var text = input.getAttribute('placeholder'),
    defaultValue = input.defaultValue;
    if (defaultValue == '') {
        input.value = text
    }
    input.onfocus = function() {
        if (input.value === text) {
            this.value = ''
        }
    };
    input.onblur = function() {
        if (input.value === '') {
            this.value = text
        }
    }
};
if (!supportPlaceholder) {
    for (var i = 0,
    len = inputs.length; i < len; i++) {
        var input = inputs[i],
        text = input.getAttribute('placeholder');
        if (input.type === 'text' && text) {
            placeholder(input)
        }
    }
};

直接把代码复制下来,保存成一个js文件引用即可，根本不用再做任何处理，超级方便~

本文转自：http://www.candoudou.com/archives/157

发布于

jQuery jCarousel 的详细参数

配置

jCarousel接受一系列的参数来控制滚动切换传送带的外观和行为。下面就是一些您可以设置的参数。

属性 类型 默认 描述
vertical bool false 指定滚动切换传送带是以水平方向显示还是垂直方向显示。改变左右方向的滚动切换为上下方向。
start integer 1 指定起始项
offset integer 1 在初始化时索引的第一个可用的项。
size integer Number of existing <li> elements if size is not passed explicitly 总共的列表项数目。
scroll integer 3 每次滚动切换的数目
visible integer null 如果通过，整个列表项的宽/高将会根据剪裁的宽/高计算和设定。因此整个列表项的数目将会被准确的显示出来。
animation mixed “fast” 用以确定滚动显示动画的速度，可以是某些jQuery式字符串（"slow"或"fast"）或是毫秒（参见jQuery文档材料）。如果设为0，则动画效果关闭。
easing string null 您想使用的缓动类型的名称（参见jQuery文档材料）。
auto integer 0 指定多少秒内容定期自动滚动。如果设置为0，则自动滚动关闭。
wrap string null 指定是否包裹第一/最后一项（或同时）并跳回到开始/结束。选项参数有"first", "last" 或"both"字符串。如果设置为null，包裹会关闭（默认）。您也可以设置"circular"作为参数使支持循环滚动显示。您可以查看实例循环滚动切换看看如何使用此参数。
initCallback function null JavaScript函数，在滚动切换初始化后执行。需传递两个参数：一个请求的滚动切换实例参数，另外一个是滚动切换的初始化状态参数（init,reset或reload）。
itemLoadCallback function null JavaScript函数，在滚动切换请求的些列表项加载完毕的时候执行。需要传递两个参数：一个当前请求的滚动切换的实例化对象，另外一个是滚动切换的活动状态参数（prev,next或init）。或者，您可以传递在动画之前或之后触发的一个或两个函数：

itemLoadCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemFirstInCallback function null JavaScript函数，滚动动画执行之后，当某一列表项成为可见区域的第一项时调用。传递四个参数：一是当前滚动切换的实例对象，二是<li>对象本身，三是用来表明当前项在列表项中位置的参数，四是滚动切换的活动状态参数（prev,next或init）。或者，您可以传递在动画之前或之后触发的一个或两个函数：

itemFirstInCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemFirstOutCallback function null JavaScript函数，滚动动画执行之后，当某一列表项不再是可见区域的第一项时调用。传递四个参数：一是当前滚动切换的实例对象，二是<li>对象本身，三是用来表明当前项在列表项中位置的参数，四是滚动切换的活动状态参数（prev,next或init）。或者，您可以传递在动画之前或之后触发的一个或两个函数：

itemFirstOutCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemLastInCallback function null JavaScript函数，滚动动画执行之后，当某一列表项成为可见区域的最后一项时调用。传递四个参数：一是当前滚动切换的实例对象，二是<li>对象本身，三是用来表明当前项在列表项中位置的参数，四是滚动切换的活动状态参数（prev,next或init）。或者，您可以传递在动画之前或之后触发的一个或两个函数：

itemLastInCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemLastOutCallback function null JavaScript函数，滚动动画执行之后，当某一列表项不再是可见区域的最后一项时调用。传递四个参数：一是当前滚动切换的实例对象，二是<li>对象本身，三是用来表明当前项在列表项中位置的参数，四是滚动切换的活动状态参数（prev,next或init）。或者，您可以传递在动画之前或之后触发的一个或两个函数：

itemLastOutCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemVisibleInCallback function null JavaScript函数，滚动动画执行之后，当某一列表项进入到可见区域内时调用。传递四个参数：一是当前滚动切换的实例对象，二是<li>对象本身，三是用来表明当前项在列表项中位置的参数，四是滚动切换的活动状态参数（prev,next或init）。或者，您可以传递在动画之前或之后触发的一个或两个函数：

itemVisibleInCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
itemVisibleOutCallback function null JavaScript函数，滚动动画执行之后，当某一列表项已经不在可见区域内时调用。传递四个参数：一是当前滚动切换的实例对象，二是<li>对象本身，三是用来表明当前项在列表项中位置的参数，四是滚动切换的活动状态参数（prev,next或init）。或者，您可以传递在动画之前或之后触发的一个或两个函数：

itemVisibleOutCallback: {
  onBeforeAnimation: callback1,
  onAfterAnimation: callback2
}
buttonNextCallback function null JavaScript函数，在’next’控制状态改变的时候调用。此方法的职责就是启用或禁用’next’控制。需传递三个参数：一是滚动切换实例对象，二是控制的元素，三是按钮是否要被禁用的标志参数。
buttonPrevCallback function null JavaScript函数，在’previous’控制状态改变的时候调用。此方法的职责就是启用或禁用’previous’控制。需传递三个参数：一是滚动切换实例对象，二是控制的元素，三是按钮是否要被禁用的flag标志。
buttonNextHTML string <div></div> 自动生成下一个按钮的HTML标记。如果设为null，则没有“下一个(next-button)”按钮创建。
buttonPrevHTML string <div></div> 自动生成前一个按钮的HTML标记。如果设为null，则没有“前一个(prev-button)”按钮创建。
buttonNextEvent string “click” 指定向后滚动触发的事件。
buttonPrevEvent string “click” 指定向前滚动触发的事件。
发布于

10款无限滚动自动翻页jquery插件

无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条来翻页的技术慢慢在互联网上遍站开花。

要在自家的网站上实现自动翻页的功能并不复杂，twitter面向开发者提供了相关的api，而且已经有人开发了相关的jquery插件，让我们可以事半功倍，下面老k为你列举一下这些无限滚动jquery插件。

1、jquery ScrollPagination

这是一款由国外jquery爱好者出于学习目的开发的自动分页插件，你可以把它应用在任何地方。

2、Screw

可以实现当用户滚动网页时加载html，避免一次性加载一个大页面，这样可以减轻宽带的负担，加快访问速度。当然它也可以实现当用户滚动滚动条到网页底部的时候自动翻页。

3、Autobrowse

通过ajax实现当用户滚动时自动加载页面内容，同时可以把内容写入到到浏览器缓存。使用很简单，只需要在html容器(例如：div)中使用autobrowse属性就可以实现了。

4、Scroll Extend Plugin

设计用来自动加载页面底部以下的内容，是通过将内容appendTo来某个dom来实现的，当滚动超出这个dom后自动加载页面内容。作者的初衷是用来集成到wordpress的。

5、Infinite Scroll Plugin

也是一款不错的无限滚动jquery插件。效果和dzone的一样。

6、Endless Scroll jQuery Plugin

比较轻巧，完成任务10次的自动加载后自动停止滚动加载。

7、Load Content While Scrolling With jQuery

内容自动加载插件，有助于加快页面初始加载速度，用户将只加载他们所看到的内容。

8、Infinite Ajax Scroll

结合jquery的ease.实现的滚动无刷新自动分页。

9、Infinite Scrolling jQuery Plugin

尤其适用于博客文章的一款自动分页插件，像twitter、fackbook实现的那样。

10、Unlimited Scroll using the Twitter API

一款基于twitter的api实现的滚动分页jquery插件，正如本文开头说的那样，twitter提供了滚动浏览器滚动条到网页底部时自动分页的实现接口，而这款正是一个很好的实现例子。不过国内的用户建议不要使用，因为我们是访问不了twitter的。

发布于

JQuery ajaxfileupload 异步上传文件

JQuery ajaxfileupload 异步上传文件：

// 调用方法：
function ajaxFileUpload() {
    $.ajaxFileUpload({
        cache:false,
        url:url,
        secureuri:false,
        fileElementId:'user_file',
        dataType: 'json',
        success: function (result) {
            alert("上传成功");
        },
        error: function () {
            alert('图片上传失败');
        }
    });

    return true;
}
<input name="user_file" type="file" />

文件下载（右击另存为）：ajaxfileupload.js