jquery特效插件、jquery插件免费下载 收藏 0

10款web设计特效插件

1.jQuery百叶窗效果焦点图 多种百叶窗动画方式

对于百叶窗动画效果，我们介绍的不是很多，目前就介绍过一款[color=rgb(68, 68, 68) !important]CSS3百叶窗图片切换。这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图，焦点图的切换伴随随机的百叶窗动画，每一种百叶窗动画都非常精巧，当然你也可以定义自己的百叶窗动画，将其加入动画列表中。

在线演示:http://www.html5tricks.com/demo/jquery-shutter-silder/index.html

源码下载:http://www.html5tricks.com/download/jquery-shutter-silder.rar

2.jQuery多层级垂直手风琴菜单

之前我们分享过一款类似的jQuery垂直手风琴菜单CSS3手风琴菜单 下拉展开带弹性动画，这次分享的这款手风琴菜单是多层级的，你可以通过HTML结构生成任意层级的菜单。由于是基于jQuery的，因此这款手风琴菜单的兼容性还不错。

在线演示:http://www.html5tricks.com/demo/jquery-level-accord-menu/index.html

源码下载:http://www.html5tricks.com/download/jquery-level-accord-menu.rar

3.纯CSS3实现幽灵漂浮动画

这又是一款基于纯CSS3的动画特效，先是用CSS3绘制了一个“可爱”的幽灵，没用运用图片，其实用CSS3绘制一些简单的线条和图形非常简单。然后通过CSS3的动画属性对幽灵进行上下的漂浮，动画效果还是非常不错的。

在线演示: http://www.html5tricks.com/demo/pure-css3-ghost-float/index.html

源码下载：http://www.html5tricks.com/download/pure-css3-ghost-float.rar

4.jQuery加入购物车商品飞入动画

现在网上商城很多，每一个网上商城都会有将商品加入购物车的功能，本文将要分享一个用jQuery实现的加入购物车商品飞入动画，与其他加入购物车效果不一样的是，当点击加入购物车，商品会自动飞入购物车里面，并通过抖动购物车来提示用户操作成功。

在线演示:http://www.html5tricks.com/demo/jquery-add-to-cart/index.html

源码下载:http://www.html5tricks.com/download/jquery-add-to-cart.rar

5.CSS3可旋转的卡通小鸟头像

这是一款很可爱的CSS3动画，关于[color=rgb(68, 68, 68) !important]HTML5小鸟的动画，大家可以去看看这个SVG HTML5可爱的小鸟卡通动画。今天要分享的这个也是基于纯CSS3实现的，只要我们将鼠标滑过小鸟头像，小鸟就会出现旋转的动画效果，非常可爱。

在线演示:http://www.html5tricks.com/demo/css3-bird-avatar/index.html

源码下载:http://www.html5tricks.com/download/css3-bird-avatar.rar

6.jQuery悬浮标题的幻灯片播放焦点图 淡入淡出动画

关于jQuery焦点图插件，html5tricks已经为大家分享过很多了。今天我们要来介绍一款很普通但相当实用的jQuery悬浮标题的幻灯片播放焦点图，焦点图十分简易，每张图片都可以有一个标题和简介内容，这些文字内容悬浮在图片下方。图片切换时也是简单的淡如淡出动画，这用jQuery是很容易实现的。

在线演示:http://www.html5tricks.com/demo/jquery-slider-float-title/index.html

源码下载:http://www.html5tricks.com/download/jquery-slider-float-title.rar

7.CSS3网站地图可视化生成器

SlickMap CSS是一款利用CSS文件直接将网站地图(sitemap)转换为可视化网页图表导航的CSS框架，它可以让一个枯燥的sitemap XML文件或者HTML文件转换成让人容易理解的组织架构图，让你对网站有个一目了然的了解。然后SlickMap CSS是自动化的，您自需要用XML或者HTML元素将站点地图结构描述好，SlickMap CSS会帮你直接渲染。

在线演示:http://www.html5tricks.com/demo/SlickmapCSS/index.html

源码下载:http://www.html5tricks.com/download/SlickmapCSS.rar

8.jQuery滑动杆实现购买日期选择

这是一款基于jQuery的滑动杆购买日期选择插件，它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用，它可以帮助你的用户快速选择产品的购买日期，十分方便。

在线演示:http://www.html5tricks.com/demo/jquery-sidebar-date-select/index.html

源码下载:http://www.html5tricks.com/downl … bar-date-select.rar

9.CSS气泡提示框 可自定义配置箭头

今天我们要来分享一款基于纯CSS的气泡提示框，和之前分享的一款jQuery消息提示框插件Tipso类似，整个提示框由箭头和矩形框组成，并且气泡提示框的箭头可以有不同的方向。这款CSS气泡提示框由纯CSS完成，最大的特点就是可以自定义配置，包括文字颜色、背景颜色和箭头方向等。

在线演示:http://www.html5tricks.com/demo/css-arrow-please/index.html

源码下载:http://www.html5tricks.com/download/css-arrow-please.rar

10.jQuery模拟抛物线轨迹动画

利用jQuery和HTML5可以模拟很多数学中的函数图象，比如HTML5 Canvas正弦波动画。今天我们要介绍一个用jQuery实现简单的模拟抛物线轨迹的插件，可以开始和暂停抛物线的运动，以及重新设置抛物线的参数。

在线演示:http://www.html5tricks.com/demo/jquery-parabola/index.html

源码下载:http://www.html5tricks.com/download/jquery-parabola.rar

切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号：qietuwang

10个最有趣的jQuery Grid插件

6. jQuery Portfolio

如果你想设计一个时尚组合的网站jQuery Portfolio 插件是一个不错的选择。

你可以在网格中设置列的数目以及想要的jQuery过渡效果。 jQuery Portfolio插件在移动设备的响应效果也很好，所以不用担心在移动设备上的用户体验。

7. jQuery MatchHeight

jQuery MatchHeight插件允许你用一种特殊的jQuery网格使得所有选中元素的高度完全相等。 MatchHeight自动匹配在同一组中的元素高度，并灵活处理浮点元素和包装。你可以使用这个插件来漂亮的放置项目。

你可以使用一个最大高度作为基准，或定义一个特定的目标元素，然后MatchHeight将会确保其它元素不会比这更大。它有一个Data API使你可以使用HTML5文件里内联标记中的数据属性。

8. Photoset Grid

如果你喜欢tumblr的Photoset功能，那Photoset Grid jQuery插件就是专门为你设计的。这个方便的前端工具就是基于Photoset功能将图像转换成灵活的网格。这个插件的原始版本是用于创建Tumblr主题，后来开发团队决定给设计人员机会让他们在该插件中自己设计。

如果你想在你自己的Tumblr主题添加Photoset Grid，你可以在自定义代码段嵌入自己的代码。大概这个插件最酷的功能可能就是在图像网格中加入了Lightbox。你可以在这里点击其中一张图片感受一下。

9. Shuffle

你是否曾经想要一个灵活的图像网格，你可以进行分类、排序和筛选项目？如果是的话，你一定要试试Shuffle。这个插件做出来的网格非常漂亮，特别是因为它在页面加载时加了一个很酷的洗牌效果。

项目可以被添加到多个组，然后用户可以通过组来过滤它们，因此这是一个很好的用户体验。该插件给列出的项目所属类别图像增加了微妙的文字说明。你可以在JavaScript变量的帮助文档下设置很多选项，如洗牌效果的速度、装订线的宽度、列的宽度等。

10. jQuery Gridly

jQuery Gridly 是实现触摸设备上网格布局的不二选择。这个插件允许用户在屏幕上拖拽项目。无论是托还是拽，调整大小的功能都会根据触屏手势进行反应。

用户可以关闭他们不喜欢的图像，在图像关闭之后页面会通过很酷的效果重新排列布局。而且jQuery Gridly很容易在Rails 应用上与Ruby集成使用。

本站文章除注明转载外，均为本站原创或翻译

Jquery插件（常用的插件库）

作者：一生的风景

转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html

随着Jquery知识点的结束，我也开始接触到框架来了。

开始的时候，总是听到插件和框架等词，我疑惑框架和插件是啥有啥区别？？

插件可以说有无数种，在网页中任何一种功能都可以被叫做插件，单独提取出来，可以供别人使用，而框架是一个超大好的的插件，它将各种方法融合成一体，使用者可以使用它来构造不同的功能。插件则专注于一种，往往只有一种功能 。

打个比方比如前面学习的jquery，jquery就是一个框架，在jquery插件库里http://www.jq22.com/有数不胜数的插件，这些插件绝大部分基于jq框架来编写。

理解完插件和框架的区别，下面来写一写这几天初步学习的插件库

1.jquery 对于我而言肯定是一个熟悉的框架了

官网网址：https://jquery.com/

插件库：http://www.jq22.com/

这里简单的介绍一下jquery ：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

2.Select2 官网网址：https://select2.org/

3.Fullpage 官网网址：https://alvarotrigo.com/fullPage/#page1

4.lazyload 官网网址：https://appelsiini.net/projects/lazyload/

5.Swiper 官网网址：https://www.swiper.com.cn/

6.nice-validator 官网网址 ：https://validator.niceue.com/docs/getting-started.html

以上提及的都是插件库，每一个有着不同的功能，jquery在这里我就不在赘述了。我就从Select2开始写

select2是一款基于jquery的功能丰富的下拉列表插件。这就说明了使用select2必须要有jquery依赖，就是要先导入jquery库，然后在导入select2插件库，然后这是一款关于下拉列表的插件。

使用方法：首先去下载压缩包文件 下载地址：https://codeload.github.com/select2/select2/zip/develop下载完成解压后在文件中我们需要找到相关的js文件和css文件，我们所需要的的就是这两个文件：在dist文件夹下有css和js，js有.js文件和min.js文件，css也是一样的。如下图所示

min.js是压缩版，没有逗号空格等等，体积小传输效率快，但可读性较差可以自行想象一下js代码就一行的场景 .js是没压缩的俗称开发版，可读性较好，易于debug调试和更改；但是体积相比较而言大一些，效率低。我采用压缩版的我不改bugQAQ 这段话或许就解决了心中的疑问

我们将css和js文件复制到我们的项目中就可以开始使用这个插件了。

这个是一个案例效果图接下来就根据这个案例来编写。

首先一点也是重中之重，导入css和js文件，jquery插件库优先导入，js cs就是我们上面复制到项目的文件，如下

在body里面写上一个普通的下拉列表：

我把js注释一下看看效果如何：

这个与和我们的效果图有着很大的区别，如何使用这个插件呢，我们不妨看看文档（虽然全是英文）

在基本语法上有着这样的语句（我们把他定义到我们的案例中去）：.js-example-basic-multiple是一个选择器

在案例中我们如下编写 （效果如右）：

这就是select2的威力，我们就使用了一行js代码就将一个普通的下拉列表变成了这样的的一个视觉效果不错的下拉列表（宽度可以修改，select2内置了很多的属性可以查看文档）。

例如给下拉列表设置宽度只需要如下写（使用大括号编写属性，用逗号分隔每个属性）

在select2文档的第三项中的Options里面有一张配置表里面涵盖了select2所有的属性（英文差的我看的有点吃力）

案例中简单的写了两个属性

插件的出现就是为了简单化代码，让我们少些了很多代码。使用起来方便简洁，就是这样select2的简单案列完成了，select2专注于选框，很多属性，可以去文档一一查阅我这里的介绍就结束了。

翻译过来就是 全屏的意思，我想已经猜出来了，这是一款全屏的插件，整个页面简洁大方，整个屏幕就是一张页面，它的官网就是一个很好的实 例 https://alvarotrigo.com/fullPage/#page1。这样的页面展示很受人喜欢，我相信大部分人都曾见过。

使用方法 同样下载压缩提取js 、css文件 下载地址 https://codeload.github.com/alvarotrigo/fullPage.js/zip/master

这个官网有一点优势emmmmmm他有中文模式 左上角可以选择

将css js复制进自己的项目里面引入js css 同样注意的依赖jquery优先导入jquery库如下：

我们可以查看文档编写（文档中有这样的一句话也就是在html文件中必须有着个声明，所以复制代码是要仔细不要复制掉了）

将这段代码复制到body里开始编写页面 在div的class值，section 以及后面的slide是不能更改的，我们必须按照fillpage的规则来 但最外层div的id可以直接设置，用于js代码中的选择

在js中如下编写（首先我们就用上了sectionsColor属性 定义背景颜色，一一对应）

当想定义横向切换时，这时候slide就登场了 ，将下面代码嵌套到<div class = \”section\”></div>中

它将会产生一个横向轮播图 注意 slide section 不可以更改 如下图所写:

效果如下：

当然插件也并不是万能的，fullpage无法设置字体大小所以需要自己定义大小 下面是自定义样式

在fullpage文档上有着很多属性（往下翻的话有对这些属性一 一的解释）

在我的案列中写了几个案例js代码如下：

文档的属性还算写的清晰，所以可以一点点编写 这一节的效果图不好截我把代码结构写上

这样子fullpage的案列就完结了，跟官网页面相似可以试着运行一下子。

lazyload 译为延迟加载， 又叫懒加载 在这个流量的时代，懒加载的出现是非常nice的，它为用户节省流量的消耗，提高性能，当一个高清图片网站一张页面几十张甚至上百张图片时，没有懒加载，它将会将所有的图片都加载出来，这就导致流量的浪费，降低性能，影响了用户的体验，而懒加载的作用是当用户看到这张图片时，它才开始加载出来，这样子就节省了大量的流量，而且优化了性能，提高了用户体验。

使用方法和上面一样下载lazyload插件包：https://codeload.github.com/tuupola/lazyload/zip/2.x

使用方法很简单，因为它只有一个功能就是延迟加载，所以我就直接上代码了 (注意在下载文件中找到对应的css，js文件复制到自己的项目中) lazyload没有css文件

我使用了12张图片然后js就一句，就可以实现懒加载功能

要为每一张图片添加class = “lazyload” ，且不能使用src 必须使用data-src 下面就来写一写怎么看两者的区别

普通加载：

懒加载：

懒加载的用法简单，但它存在的意义不凡，有些框架也会内置懒加载功能 列如上面介绍的fullpage插件

所以，懒加载的使用结束，或许现在感觉不它的作用，但是以后的编程日子里我想我百分百会和它再次的碰面。

Swiper 译为猛击者，确实在视觉上它的确很吸引我，首先它是一款触摸滑动插件 它与fullpage相似又有着各自的特点。

用swiper来做轮播 ，导航我想是很好的选择 swiper不依赖jq所以当项目中不需要jq时可以不用到jquery库

同样先下载swiper的包：https://www.swiper.com.cn/download/swiper-5.3.7.zip 在文件中找到对应的js css文件，复制到自己的项目然后导入如下：

先上一张效果图：

如图所示一款很炫酷的轮播图可以说swiper的中文文档非常的nice，思路清晰。就是emmmm属性有点多一时半会看完我现在想着，根据以上的插件库案列

这个插件的使用就应该不用我来再做赘述了，我就直接粘贴代码代码如下：

不管是什么插件或者框架，它的使用方法都万变不离其宗。相似是 他们的共同点，更何况swiper的文档看着这么的舒服

nice-validator 插件是一款比关于验证表单的插件，当用户注册时，来判断注册手机号码是否合法，是否为空，密码与确认密码是否相等，邮箱是否合法等等等等。

同样先下载:https://codeload.github.com/niceue/nice-validator/zip/master 复制对应的css js文件 到项目并导入，如下：

以案列为准，由于没有css我直接手写了有个简单的css样式。

当然html的表单也是手写对于样式，id class的名称这些，这款插件与其他的不同，可以自己定义：

js写法：无论那样的写法他实现的功能是一样的

这些属性可以看看文档里面的介绍（我简单的截取两张，更多属性一步官网 https://validator.niceue.com/docs/getting-started.html）

自定义规则

内置规则

这款插件的属性还是蛮多的 在常用规则整理中有着常用的规则。

对了这里有一个绕的地方（我单独截出来反正我看着的时候看半天）

就这样，这款插件有没有过多的介绍了。有很多坑和细节还得自己去真正用的时候去看

以上的五款插件全部介绍完成，案列源码下载：https://files.cnblogs.com/files/2979100039-qq-con/jqy_example_10.zip

我想各位小伙伴们看完这篇文章，也或多或少的对插件或者框架的使用有些了解了，但要明白一件事纸上得来终觉浅的道理，

有心人想要去学习一样东西，他就不止是想还要做。所以勤加练习是学好编程的不灭准则。

学习中，有地方错误还请指正。

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

作者：一生的风景

转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com