Web 开发最有用的50款 jQuery 插件集锦——《综合篇》

梦里梦外; 2021-11-16 09:54 282阅读 0赞

这篇文章是《Web 开发最有用的50款 [**jQuery**][jQuery] 插件集锦》系列的最后一篇，整个系列向大家分享了在网站开发中非常有帮助的 50 款 [ **jQuery**][_jQuery] 插件，这些插件按用途主要有以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件，视频插件等等，系列其它文章列表如下：

您可能感兴趣的相关文章

*  [50款最有用的 jQuery 插件集锦《表单篇》][50_ jQuery]
 *  [50款最有用的 jQuery 插件集锦《图片特效篇》][_jQuery]
 *  [50款最有用的 jQuery 插件集锦《网页布局篇》][50_ jQuery 1]
 *  [50款最有用的 jQuery 插件集锦《内容滑块篇》][50_ jQuery 2]
 *  [50款最有用的 jQuery 插件集锦《网站导航篇》][50_ jQuery 2]
 *  [50款最有用的 jQuery 插件集锦《图标排版篇》][50_ jQuery 3][  
    ][Link 1]

#### [Swipebox][] ####

[![SouthEast][]][Swipebox]

Swipebox 是一款可触摸的 [**jQuery**][jQuery] 灯箱效果插件，可用于桌面，移动和平板电脑。

支持移动设备滑动手势导航，桌面电脑上可以用键盘导航，不支持 [**CSS3**][CSS3] 过渡特性的浏览器使用 jQuery 降级处理，支持视网膜显示，能够通过 CSS 轻松定制。

使用示例：

$("#gallery").click(function(e){
    	e.preventDefault();
    	$.swipebox([
    		{href:'big/image1.jpg', title:'My Caption'}, 
    		{href:'big/image2.jpg', title:'My Second Caption'}
    	]);
    });

[ 插件下载][Link 2]     [效果演示][Swipebox]

#### [Tooltipster][] ####

[![SouthEast 1][]][Tooltipster]

Tooltipster 是一款轻量的，易于使用的 jQuery 插件，使您可以轻松创建语义化，现代化的工具提示。Tooltipster 允许您在提示内容中使用任何你能想到的 HTML 标签，这意味着您可以在提示层里插入图像和文本格式标记之类的东西。

效果可以自由定制，默认参数如下：

$('.tooltip').tooltipster({
       animation: 'fade',
       arrow: true,
       arrowColor: '',
       content: '',
       delay: 200,
       fixedWidth: 0,
       maxWidth: 0,
       functionBefore: function(origin, continueTooltip) {
          continueTooltip();
       },
       functionReady: function(origin, tooltip) {},
       functionAfter: function(origin) {},
       icon: '(?)',
       iconDesktop: false,
       iconTouch: false,
       iconTheme: '.tooltipster-icon',
       interactive: false,
       interactiveTolerance: 350,
       offsetX: 0,
       offsetY: 0,
       onlyOne: true,
       position: 'top',
       speed: 350,
       timer: 0,
       theme: '.tooltipster-default',
       touchDevices: true,
       trigger: 'hover',
       updateAnimation: true
    });

[ 插件下载][Link 3]     [效果演示][Link 4]

#### [jQuery Transit][] ####

[![jQuery Transit][jQuery Transit 1]][jQuery Transit]

Transit 用于实现超平滑的 CSS3 过渡和变换动画效果。借助这款插件，你可以轻松实现 translate、rotate、scale 和 skew 等众多效果。

Transform 效果使用示例：

$("#box").css({ x: '30px' });               // Move right
    $("#box").css({ y: '60px' });               // Move down
    $("#box").css({ translate: [60,30] });      // Move right and down
    $("#box").css({ rotate: '30deg' });         // Rotate clockwise
    $("#box").css({ scale: 2 });                // Scale up 2x (200%)
    $("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
    $("#box").css({ skewX: '30deg' });          // Skew horizontally
    $("#box").css({ skewY: '30deg' });          // Skew vertical
    $("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
    $("#box").css({ rotateY: 30 });
    $("#box").css({ rotate3d: [1, 1, 0, 45] });

Transition 效果使用示例：

$("#box").transition({ opacity: 0.1, scale: 0.3 });
    $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
    $("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
    $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
    $("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
    $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything

[ 插件下载][Link 5]     [效果演示][jQuery Transit]

#### [noty][] ####

[![noty][noty 1]][noty]

noty 这款插件效果特别炫丽！可以轻松实现通知，提醒，成功、错误或者警告提示，确认提示等等，效果十分丰富，可以自定义文本、动画、速度以及按钮。

默认参数配置如下：

$.noty.defaults = {
        layout: 'top',
        theme: 'defaultTheme',
        type: 'alert',
        text: '',
        dismissQueue: true, // If you want to use queue feature set this true
        template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
        animation: {
            open: {height: 'toggle'},
            close: {height: 'toggle'},
            easing: 'swing',
            speed: 500 // opening & closing animation speed
        },
        timeout: false, // delay for closing event. Set false for sticky notifications
        force: false, // adds notification to the beginning of queue when set to true
        modal: false,
        maxVisible: 5, // you can set max visible notification for dismissQueue true option
        closeWith: ['click'], // ['click', 'button', 'hover'],
        buttons: false // an array of buttons
    };

[ 插件下载][Link 6]     [效果演示][Link 7]

#### [jQuery Vector Maps][] ####

[![jQuery Vector Maps][jQuery Vector Maps 1]][jQuery Vector Maps]

JQVMap 是一款实用的地图插件，在现代浏览器（Firefox, Safari, Chrome, Opera and Internet Explorer 9）中使用可伸缩矢量图形技术（SVG）来显示地图，低版本的 IE（Internet Explorer 6-8）使用 VML 来提供地图功能。

示例代码：

[ 插件下载][Link 8]     [效果演示][jQuery Vector Maps]

#### [BigVideo.js][] ####

[![BigVideo.js][BigVideo.js 1]][BigVideo.js]

BigVideo.js 可以很容易地在网站中实现填充的背景视频。它可以用于播放无声的环境背景视频，或者一系列的影片，你也可以用它来显示目前流行的网站大背景图像功能。

创建一个铺满整个浏览器窗口的视频：

$(function() {
        var BV = new $.BigVideo();
        BV.init();
        BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
    });

在 Firefox 浏览器中，可以配置显示 Ogg 格式视频：

$(function() {
        var BV = new $.BigVideo({useFlashForFirefox:false});
        BV.init();
        BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
    });

如果是背景视频，则如下配置：

$(function() {
        var BV = new $.BigVideo();
        BV.init();
        BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
    });

[ 插件下载][Link 9]     [效果演示][Link 10]

#### [Calendario][] ####

[![SouthEast 2][]][Calendario]

Calendario 是一个灵活的日历插件，用于实现响应式的布局。其目的是在小屏幕和大屏幕，提供一个合适的布局让日历尽可能保持流体结构。这款插件来自 Codrops，有详细的制作教程可以参考学习：《[Calendario: A Flexible Calendar Plugin][Calendario]》。

[ 插件下载][Link 11]     [效果演示][Link 12]

### 您可能感兴趣的相关文章 ###

*  [60款非常酷的 jQuery 幻灯片演示和下载][60_ jQuery]
 *  [15个款优秀的 jQuery 图片特效插件推荐][15_ jQuery]
 *  [几款优秀的 jQuery Ajax 分页插件和教程][Link 1]
 *  [Web开发者必备的20款超赞 jQuery 插件][Web_20_ jQuery]
 *  [分享23款美轮美奂的 jQuery 图片特效插件][23_ jQuery]

本文链接：[网站开发最有用的50款 jQuery 插件集锦——综合篇][50_ jQuery 4]

编译来源：[梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源][_ _ _]

hide

[jQuery]: http://www.cnblogs.com/lhb25/category/277997.html
[_jQuery]: http://www.cnblogs.com/lhb25/p/50-jquery-plugins-f.html
[50_ jQuery]: http://www.cnblogs.com/lhb25/archive/2013/03/20/50-jquery-plugins-c.html
[50_ jQuery 1]: http://www.cnblogs.com/lhb25/archive/2013/02/01/50-jquery-plugins-a.html
[50_ jQuery 2]: http://www.cnblogs.com/lhb25/archive/2013/02/01/50-jquery-plugins-b.html
[50_ jQuery 3]: http://www.cnblogs.com/lhb25/archive/2013/05/09/50-jquery-plugins-e.html
[Link 1]: http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html
[Swipebox]: http://brutaldesign.github.io/swipebox/
[SouthEast]: /images/20211116/d59f70318214489fa4a5c4279e5ac90e.png
[CSS3]: http://www.cnblogs.com/lhb25/category/146075.html
[Link 2]: https://github.com/brutaldesign/swipebox/archive/master.zip
[Tooltipster]: http://calebjacob.com/tooltipster/
[SouthEast 1]: /images/20211116/d64de5befa0244028283c4f3b858f550.png
[Link 3]: https://github.com/iamceege/tooltipster/archive/master.zip
[Link 4]: http://calebjacob.com/tooltipster/#demos
[jQuery Transit]: http://ricostacruz.com/jquery.transit/
[jQuery Transit 1]: http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/04/jquery-new-plugin-23.jpg
[Link 5]: http://ricostacruz.com/jquery.transit/jquery.transit.min.js
[noty]: http://needim.github.com/noty/
[noty 1]: http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/04/jquery-new-plugin-34.jpg
[Link 6]: https://github.com/needim/noty/archive/master.zip
[Link 7]: http://needim.github.io/noty/
[jQuery Vector Maps]: /images/20211116/c71978c4bc2145e4a2f2c6c67d0cc302.png
[jQuery Vector Maps 1]: http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/09/new_jquery_21.jpg
[Link 8]: https://github.com/manifestinteractive/jqvmap/zipball/stable
[BigVideo.js]: http://dfcb.github.com/BigVideo.js/
[BigVideo.js 1]: http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/09/new_jquery_16.jpg
[Link 9]: https://github.com/dfcb/BigVideo.js/zipball/master
[Link 10]: http://dfcb.github.io/BigVideo.js/
[Calendario]: http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/
[SouthEast 2]: /images/20211116/de87e1b34c5542e7ba7ca7ca6a0561bf.png
[Link 11]: http://tympanus.net/Development/Calendario/Calendario.zip
[Link 12]: http://tympanus.net/Development/Calendario/
[60_ jQuery]: http://www.cnblogs.com/lhb25/archive/2011/05/31/2056103.html
[15_ jQuery]: http://www.cnblogs.com/lhb25/archive/2011/11/20/15-jquery-image-effects.html
[Web_20_ jQuery]: http://www.cnblogs.com/lhb25/archive/2011/02/16/1956557.html
[23_ jQuery]: http://www.cnblogs.com/lhb25/archive/2012/08/13/jquery-image-effects-plugins.html
[50_ jQuery 4]: http://www.cnblogs.com/lhb25/p/50-jquery-plugins-g.html
[_ _ _]: http://www.cnblogs.com/lhb25/