11款非常的jQuery插件[附全体demo下载]_jquery_脚本之家

英文链接:

1.甜缩略图预览图库

这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单。

我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成,这些都由插件completer来帮您实现。

1.Shadow Animation

(演示 | 下载)

效果展示源码下载

效果展示图如下所示:

背景动画,支持淡入淡出效果,可惜ie不支持,火狐和谷歌浏览器能正常运行。

在本教程中,我们将创建一个使用jQuery的图片廊,显示了每个形象作为一个小的缩略图预览。我们的想法是悬停在滑块点到预览缩略图幻灯片。单击滑块点时,完整的图像将幻灯片在从左侧或右侧,根据当前观看的图像。

首先将monthpicker插件相关的css和js文件载入,大家可以到源码下载里下载css和js文件。

效果展示源码下载

2.jQuery Quick Tip

图片 1

然后在要放置年月的位置加入如下代码,可以是输入框可以是链接等任意HTML元素。

首先载入jQuery库和插件completer.js,当然还有相关CSS样式文件,这些都在源码下载里已打包好了。

jQuery快速提示插件。

2. 使用jQuery组合缩放滑杆

jQuery

接下来我们在页面中需要放置输入框的地方放置如下代码,这是一个要求用户输入邮箱的输入表单。

3.uGallery – Tiny and Clean Image Gallery

(演示 | 下载)

接下来很简单,我们来调用插件。

Javascript

用户浏览图片的插件。

在本教程中,我们要创建一个组合或类似的网站使用jQuery的一些好的效果。我们将创建一个微小的滑块,并集成了惊人的云变焦插件和优雅的Fancybox插件。

${ $.monthpicker({ years: [2015, 2014, 2013, 2012, 2011], topOffset: 6, onMonthSelect: function { console.log('Month: ' + m + ', year: ' + y); } }); $.monthpicker({ years: [2015, 2014, 2013, 2012, 2011], topOffset: 6 }) }); 

直接$调用,非常简单,如果不想用函数调用的方式也可以在元素上使用data-toggle=”completer”和data-*属性来调用插件效果。

4.ezColumns

图片 2

代码中可以看出,参数years是一个数组,可以设置年份,参数topOffset就是触发弹出的面板与当前元素的偏移距离。onMonthSelect是选择月份后的回调函数。现在运行网页,点击链接或输入框,会弹出一个年月选择面板,选择好后,面板消失,并在链接上或输入框内显示所选的年月。至于弹出面板中的月份样式可以修改jquery.monthpicker.css中的css来获取最佳视觉效果。

${ $("#auto-complete-email").completer({ separator: "@", source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"] }); }); 

动态列插件

3. 合并使用jQuery的图像框

选项设置

5.slideMosaic

演示 | 下载)

选项 说明 默认值 complete 当输入完成时触发 function() {} itemTag
弹出展示面板中的列表元素标签 “li” filter
过滤函数,当输入后会先过滤相关列表内容再展示列表 function { return val;
} position 弹出列表面板相对输入框的位置,值有”top”, “right”, “bottom”,
“left”. “bottom” source 将要自动补全展示的数据 [] selectedClass
当弹出面板中的选项被选中时的样式 “completer-selected” separator
分隔符,将输入的内容与建议自动完成的部分分隔,如@ “” suggest
如果设置成true,将会进入建议suggestion模式,将自动匹配所输入的内容 false
template 弹出面板的模板 “

有点像七巧板的感觉的插件

在本教程中,我们会告诉你一个很好的效果与jQuery的图像。的想法是有一个旋转,一旦点击,动画的形式选定的图像的缩略图。您可以通过图像浏览Previous和Next按钮,当大的图像获取点击它会再次分散成小方块形的缩略图。

” zIndex 弹出面板的css中的z-index值 1

6.Modalpop

图片 3

Completer插件提供了丰富的选项设置和方法调用。

弹出窗提示插件

4. Moleskine记事簿与jQuery小册子

7.jQuery File Upload

演示 | 下载)

jQuery文件上传插件

在本教程中,我们将向您展示如何通过人才的使用和定制的辉煌jQuery的小册子插件会Grauvogel。我们将创建一个虚拟Moleskine记事簿,从博客的最新文章。

8.Flyout Ribbon

图片 4

Ribbon布局插件

5. 使用jQuery的动画形式切换

9.Snippet

演示 | 下载)

代码段着色插件

在本教程中,我们将创建一个简单的动画形式开关有三个非常常见的形式。我们的想法是不离开页面,当用户进入另一种形式,而是做出新的形式出现在同一个容器中,扩大或承包的新形式的尺寸。

10.Tytabs : Simple Fading Tabs

图片 5

简单的淡入淡出Tab插件

6. 视差滑块与jQuery

11.Color Animation

演示 | 下载)

11款jQuery插件所有Demo下载:

在本教程中,我们将利用视差的原则,将不同的背景,当我们的幻灯片图像,以创造一些不错的角度。这将给予了极大的深度,整个滑块,当它在运动。

图片 6

7. 如何创建一个jQuery的确认对话框更换

演示 | 下载)

在本教程中,我们正在建设一个跨浏览器,自定义,在一个易于使用的jQuery插件的形式确认对话框。您可以选择文本,按钮,单击时将要执行的的行动。

图片 7

8. 如何使自动推进幻灯片

演示 | 下载)

在这短短的教程,我们将采取一看,是一个jQuery的片段,将帮助您自动化您的网站上的任何幻灯片。

图片 8

原文:

(演示 | 下载)
在本教程中,我们将创建一个使用jQuery的图片廊,显示了每个形象作为一个小的缩略图预览。我们的想法…

相关文章