Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
这篇文章是《Web 开发最有用的50款 jQuery 插件集锦》系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,系列其它文章列表如下:
Swipebox
Swipebox 是一款可触摸的 jQuery 灯箱效果插件,可用于桌面,移动和平板电脑。
支持移动设备滑动手势导航,桌面电脑上可以用键盘导航,不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理,支持视网膜显示,能够通过 CSS 轻松定制。
使用示例:
1 2 3 4 5 6 7 | $( "#gallery" ).click( function (e){ e.preventDefault(); $.swipebox([ {href: 'big/image1.jpg' , title: 'My Caption' }, {href: 'big/image2.jpg' , title: 'My Second Caption' } ]); }); |
Tooltipster
Tooltipster 是一款轻量的,易于使用的 jQuery 插件,使您可以轻松创建语义化,现代化的工具提示。Tooltipster 允许您在提示内容中使用任何你能想到的 HTML 标签,这意味着您可以在提示层里插入图像和文本格式标记之类的东西。
效果可以自由定制,默认参数如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $( '.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 }); |
jQuery Transit
Transit 用于实现超平滑的 CSS3 过渡和变换动画效果。借助这款插件,你可以轻松实现 translate、rotate、scale 和 skew 等众多效果。
Transform 效果使用示例:
1 2 3 4 5 6 7 8 9 10 11 | $( "#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 效果使用示例:
1 2 3 4 5 6 | $( "#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 |
noty
noty 这款插件效果特别炫丽!可以轻松实现通知,提醒,成功、错误或者警告提示,确认提示等等,效果十分丰富,可以自定义文本、动画、速度以及按钮。
默认参数配置如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $.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 }; |
jQuery Vector Maps
JQVMap 是一款实用的地图插件,在现代浏览器(Firefox, Safari, Chrome, Opera and Internet Explorer 9)中使用可伸缩矢量图形技术(SVG)来显示地图,低版本的 IE(Internet Explorer 6-8)使用 VML 来提供地图功能。
示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < script src="js/jquery.vmap.js"></ script > < script src="js/jquery.vmap.world.js"></ script > < script src="js/jquery.vmap.sampledata.js"></ script > < script > jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: null, color: '#ffffff', hoverOpacity: 0.7, selectedColor: '#666666', enableZoom: true, showTooltip: true, values: sample_data, scaleColors: ['#C8EEFF', '#006491'], normalizeFunction: 'polynomial' }); </ script > < div id="vmap" style="width: 600px; height: 400px;"></ div > |
BigVideo.js
BigVideo.js 可以很容易地在网站中实现填充的背景视频。它可以用于播放无声的环境背景视频,或者一系列的影片,你也可以用它来显示目前流行的网站大背景图像功能。
创建一个铺满整个浏览器窗口的视频:
1 2 3 4 5 | $( function () { var BV = new $.BigVideo(); BV.init(); BV.show( 'http://video-js.zencoder.com/oceans-clip.mp4' ); }); |
在 Firefox 浏览器中,可以配置显示 Ogg 格式视频:
1 2 3 4 5 | $( function () { var BV = new $.BigVideo({useFlashForFirefox: false }); BV.init(); BV.show( 'vids/river.mp4' , {altSource: 'vids/river.ogv' }); }); |
如果是背景视频,则如下配置:
1 2 3 4 5 | $( function () { var BV = new $.BigVideo(); BV.init(); BV.show( 'http://video-js.zencoder.com/oceans-clip.mp4' ,{ambient: true }); }); |
Calendario
Calendario 是一个灵活的日历插件,用于实现响应式的布局。其目的是在小屏幕和大屏幕,提供一个合适的布局让日历尽可能保持流体结构。这款插件来自 Codrops,有详细的制作教程可以参考学习:《Calendario: A Flexible Calendar Plugin》。
您可能感兴趣的相关文章
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
2012-08-05 新鲜出炉的2012年8月桌面日历壁纸免费下载