一些前端用的JS插件

整理一些常用的JS库，其中大多数是jQuery相关插件，也有Bootstrap辅助插件及非jQuery插件。其功能涉及：页面布局、图片幻灯片播放、图片像册展示、功能辅助等内容。本篇只是简单介绍插件功能，以后使用到相关插件时再补充介绍插件使用方法的文章。

  1. jQuery Easing：jQuery 动画效果扩展
  2. jQuery Migrate：jQuery 应用迁移辅助插件
  3. Modernizr：专为HTML5和CSS3开发的功能检测类库
  4. jQuery Flexslider：响应式 jQuery 内容滚动插件
  5. WOW：在页面滚动时展现动感的元素动画效果
  6. Sticky：让某个元素一直浮动在页面某个位置
  7. Bootstrap Hover Dropdown：Bootstrap鼠标悬停自动下拉
  8. jQuery Stellar：基于jQuery的视差滚动插件
  9. Owl Carousel：强大实用的jQuery幻灯片插件
  10. YTPlayer：基于jQuery的YouTube视频播放插件
  11. jQuery Waypoints：jQuery滚动监听插件
  12. easyPieChart：轻量级的图表插件
  13. Isotope：jQuery智能布局插件
  14. jQuery imagesLoaded：jQuery图片加载插件
  15. jQuery Countdown：精确到毫秒的jquery倒计时插件
  16. jQuery Counterup：jQuery数字动态累加jQuery
  17. jqBootstrapValidation：用于Bootstrap表单的JQuery验证框架
  18. jQuery Revolution Slider：强大的视差响应幻灯插件

1. jQuery Easing：jQuery 动画效果扩展

jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果，jQuery Easing（jquery.easing.js）是一款jQuery动画效果扩展增强插件，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。

jQuery Easing是一款比较老的jQuery插件，在很多网站都有应用，尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧，且有多种动画方案供选择，使用简单，而且免费。

2. jQuery Migrate：jQuery 应用迁移辅助插件

jQuery 版本之间有区别。比如1.9版本对于 live()，die()，toggle()，sub()，$.browser
等等都已经不支持了。 在不改变你网站代码的同时，要使用 1.9 之后的版本，你需要使用 jQuery
migrate（jquery-migrate）进行转移、过度。

3. Modernizr：专为HTML5和CSS3开发的功能检测类库

Modernizr（moderniz.js）是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。

当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、
border-image、box-shadow、rgba()
等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的
标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。

4. jQuery Flexslider：响应式 jQuery 内容滚动插件

Flexslider（jquery.flexslider.js）是一款轻量的响应式基于jQuery的内容滚动插件。Flexslider能够帮助你在项目轻松的创建漂亮的内容滚动效果。这款插件曾经连续多年入选
WDL 的年度最佳 jQuery
插件，值得大家在网站开发中试试。它能让你轻松的创建内容滚动的效果，具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。

5. WOW：在页面滚动时展现动感的元素动画效果

在一些网页上，当你滚动页面的时候会看到各式各样的元素动画效果，非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件，很容易定制，你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。

Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css
动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小，类似
Scrollorama（这个非常华丽，但是也更繁杂）。Wow.js 非常容易安装和使用。如果你使用 Wow.js，你可以非常快的启动，执行代码。

6. Sticky：让某个元素一直浮动在页面某个位置

Sticky（sticky.js）一个jQuery插件，使你能够做任何元素在您的网页上总是可见的。jQuery
Sticky可以让任意元素固定在页面的某个且保持可见。可以作为顶部固定导航显示插件，滚动网页下来，保持处理滚动元件在视图中，并不会因为页面滚动而消失，也不会被其他元素覆盖。

7. Bootstrap Hover Dropdown：Bootstrap鼠标悬停自动下拉

Bootstrap Hover Dropdown（bootstrap-hover-dropdown.js）插件，用于鼠标悬停时使dropdown元素下拉，增强用户体验

8. jQuery Stellar：基于jQuery的视差滚动插件

jQuery Stellar（ Stellar.js）能帮助轻松的实现网页视差滚动效果,提供任何滚动元素的视差滚动效应。只需给标签添加data属性，然后运行$.stellar()就可以实现酷炫的视差滚动了

9. Owl Carousel：强大实用的jQuery幻灯片插件

Owl Carousel（ owl.carousel.js）是一个强大、实用但小巧的 jQuery
幻灯片插件，它具有以下特点：兼容所有浏览器、支持响应式、支持 CSS3 过度、支持触摸事件、支持 JSON 及自定义 JSON
格式、支持进度条、支持自定义事件、支持延迟加载、支持自适应高度等

10. YTPlayer：基于jQuery的YouTube视频播放插件

YTPlayer（jquery.mb.YTPlayer.js）是一款基于jQuery的YouTube视频播放插件
这个插件能在让你在你的网站播放你喜欢的YouTube视频，或把你的YouTube视频做为你网站的HTML背景。不过这个插件在天朝似乎意义不大。

11. jQuery Waypoints：jQuery滚动监听插件

jQuery Waypoints（Waypoints.js）是一款用于捕获各种滚动事件的插件。
使用Waypoints.js可以在用户滚动滑条的时候，就能触发各种各样的动态效果。比如图片浮现、文字漂移等各种各样的动画等。同时Waypoints还支持固定元素和无限滚动的功能，功力十分强大。

插件介绍：一个元素滚动监听插件 Waypoints

12. easyPieChart：轻量级的图表插件

jQuery East Pie
Chart（easypiechart.js）是一个轻量级的jQuery插件，主要用来渲染和制作漂亮的饼图及动画效果，基于与HTML5的canvas元素。您可以通过一组这些选项的初始化函数来设置一个自定义的行为。这个插件支持支持canvas元素所有主流浏览器。
随着excanvas你甚至可以呈现在IE 7 +8的图表

13. Isotope：jQuery智能布局插件

Isotope（jquery.isotope.js）是一款优秀的jquery自适应插件，支持大多数浏览器，需要jquery
1.4.3及其以上版本。你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。同时Isotope还有许多很酷的动画。

14. jQuery imagesLoaded：jQuery图片加载插件

imagesLoaded（jquery.imagesloaded.js）插件是在图片加载成功后才做一系列操作,检测图像是否已经加载，在图片加载成功后才做一系列操作。

插件介绍：图片延时加载插件 imagesLoaded

15. jQuery Countdown：精确到毫秒的jQuery倒计时插件

jQuery Countdown（jquery.countdown）是一款免费的jQuery倒计时插件，使用非常简单，直接下载源文件拷贝里面的代码到你需要使用的页面，然后自定义倒计时的开始时间即可，支持需要IE8+浏览器。

插件介绍：jQuery 倒计时插件 jQuery.countdown

16. jQuery Counterup：jQuery数字动态累加jQuery

jQuery Counterup（jquery.counterup.js）一个jQuery数字显示插件，用于数字从低到高动态累加，可以在一定时间内将数字动态的由0显示到指定的值。

插件介绍：数字累加插件 CounterUp

17. jqBootstrapValidation：用于Bootstrap表单的jQuery验证框架

jqBootstrapValidation（jqBootstrapValidation.js）是一个用于Bootstrap表单的JQuery验证框架。验证直接用data-方式进行代码编写，不需要编写JS格式，支持邮箱验证、数字型最大最小值验证、长度验证、正则表达式验证、异步验证、以及组合式验证、提交出错成功时回调显示。

18. jQuery Revolution Slider：强大的视差响应幻灯插件

jQuery Revolution
Slider（jquery.themepunch.revolution.js）是一个具有视差功能的幻灯片插件，此插件是wordpress上目前为至最强大的幻灯片插件，具有自适应功能、可创建全宽幻灯片、具有视差效果，所有幻灯片拥有的功能他全部拥有。

Slider
Revolution是codecanyon上销量第一的wordpress幻灯插件，themeforest中wordpress主题使用率最高的幻灯插件。文章缩略图、图片切换、动画效果、3d效果…只有你想不到，没有它做不到，Slider
Revolution幻灯插件的强大只有你使用过后才能知道。这也是themeforest众多主题作者把它作为主题内置插件的原因。

时间： 2024-10-10 18:34:03

一些前端用的JS插件的相关文章

前端js插件

jquery jquery官方 版本:v 2.1.0v 1.11.0 yquery 暂停更新 版本: v 1.6v 1.5 v 1.4v 1.3 v 1.2v 1.1 v 1.0 jQuery 原型插件(jquery-*) jquery-drag 版本: latestv 1.1 v 1.0 jquery-dialog 版本: latestv 1.5 v 1.4v 1.3 v 1.2v 1.1 v 1.0 样式:default jquery-scrollable 版本: latestv 1.0 j

Intense Images – 全屏浏览图像的 JS 插件

Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和字幕的制作. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件 精心挑选的美轮美奂的 jQuery 图片特效插件 精心挑选的优秀jQuery Ajax分页插件和教程 精心挑选的优秀 jQuery 文本特效插件和教程 源码下载

Sublime Text 3前端开发常用优秀插件介绍

Package Control插件管理 提到Sublime Text插件安装,就不得不提Package Control [官方文档] 简而言之,它是用来管理插件的插件 所以,首次使用前也是需要安装的 使用Ctrl+`(Esc键下方)快捷键或者通过View->Show Console菜单打开命令行 将以下代码复制后粘贴到如上图中"<代码粘贴处>",然后按Enter(回车),稍等片刻 import urllib.request,os,hashlib; h = '2915d

知问前端——Ajax表单插件

传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款form.js表单的Ajax提交插件将解决这个问题. 一.核心方法 官方网站:http://malsup.com/jquery/form/ form.js插件有两个核心方法:ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能. 若没有结合其他插件.js.jQuery里的submit()方法时,就用ajaxForm()提交表单. 若用js.jQuery里的submit()方

Sublime Text 前端开发常用扩展插件推荐

Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text 易于扩展,众多开发人员为其贡献插件,而且通过包管理工具 —— Package Control 可以方便安装和管理. Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. Sublim

Vue.js高仿饿了么外卖App 前端框架Vue.js 1.0升级2.0

课程目录:第1章 课程简介介绍课程的学习目标和学习内容.第2章 Vuejs介绍从前端开发趋势分析开始,引入 MVVM 开发框架和 Vue.js,接着对比流行框架Angular 和 React,最后详细介绍 Vue.js 的核心思想-数据驱动和组件化.第3章 Vue-cli 开启 Vuejs 项目介绍 Vue 项目的脚手架,如何安装,对脚手架生成的目录文件做介绍,介绍 Vue 组件的编写方法,最后运行 demo 项目并介绍 webpack 构建脚本来说明 demo 的运行原理.第4章 项目实战-准

AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就是由CSS渲染和JS来控制行为的组件.比较不好理解就是Web组件,好像跟JS插件意思差不多,都是CSS和JS组成的.它们到底区别在哪?我们重点来讲这个.我们通过学习如何调用Web组件(其中的手风琴组件)来一步一步了解其与JS插件的区别. 示例01.Web组件-直接使用 (请下载附件查看示例) 示例中

web前端常用的一些插件

1.jquery 全屏滚动插件 fullPage.js http://www.dowebok.com/demo/2014/77/ 2.页面常用轮播插件   2.http://www.superslide2.com/demo.html  3.常用弹框插件 web前端常用的一些插件

zend studio 做前端推荐安装的插件

zend studio 做前端推荐安装的插件 1.Aptana插件代码提示 Zend Studio的aptana插件,解决了Zend Studio对前台代码支持不足的问题,而且在某些方面还比诸如dw优秀的功能特性,下面是安装完aptana插件后的一些配置,尤其是可以添加js库的 代码提示,很强大!对html,css,js代码提示功能,装上用了下,感觉不错. 官方下载网址:http://www.aptana.com/ 在线安装,location中输入:http://download.aptana.