插件收藏

<article itemscope="" itemtype="http://schema.org/BlogPosting">

Echo.js – 简单易用的图片延迟加载插件

  • github:https://github.com/toddmotto/echo

  • 官方网站:https://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

  • star:3k+

  • Install:

      npm:npm install echo-js
      bower:bower install echojs
    
    
  • 大小:2KB

  • 功能介绍:

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库,压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视区域的时候,它就会改变图像的 src 属性,从服务端加载所需的图片,这也是一个异步的过程。

Lazyr.js – 延迟加载图片(Lazy Loading)

  • github:https://github.com/callmecavs/layzr.js

  • 官方网站:http://callmecavs.com/layzr.js/

  • star:5k+

  • Install:

      npm:npm install layzr.js --save
    
    
  • 大小:2.75 KB

  • 功能介绍:

    Lazyr.js 是一个小的、快速的、现代的、相互间无依赖的图片延迟加载库。通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度。这个库通过保持最少选项并最大化速度。

  • Demo:

    跟上面的Echo.js用法类似,喜欢的可以自行去尝试,这里就不再演示了,我一般用Echo.js。

better-scroll.js – 小巧,灵活的 JavaScript 模拟滚动条的插件

  • github:https://github.com/ustbhuangyi/better-scroll

  • 官方网站:https://ustbhuangyi.github.io/better-scroll/

  • star:300+

  • Install:

      npm install better-scroll --save-dev
      import BScroll from 'better-scroll';
    
    
  • 大小:24 KB

  • 功能介绍:

    better-scroll 是一个只有24.8KB的 JavaScript 模拟浏览器自带滚动条的插件,是在iscroll开源的基础上进行优化的一款插件,简单好用,轻巧高性能,功能强大,API通俗易懂,是一款优秀的scroll插件,抛弃原生滚动条,从现在做起。

better-picker – 一款轻量级IOS风格的JavaScript选择器

  • github:https://github.com/ustbhuangyi/picker

  • 官方网站:http://ustbhuangyi.github.io/picker/

  • star:200+

  • Install:

      npm: npm install better-picker --save-dev
      import Picker from 'better-picker'
    
    
  • 大小:46.5 KB

  • 功能介绍:

    移动端最好用的的筛选器组件,高仿 ios 的 UIPickerView ,非常流畅的体验,原生 JS 实现,不依赖任何插件和第三方库。

Sortable – 一款用于实现元素拖拽排序的功能的插件

  • github:https://github.com/RubaXa/Sortable

  • 官方网站:http://rubaxa.github.io/Sortable/

  • star:9k+

  • Install:

      Bower: bower install sortablejs --save
      npm: npm install sortablejs
    
    
  • 大小:5 KB

  • 功能介绍:

    Sortable:现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery这玩意。

slick – 功能异常强大的一个图片滑动切换效果库

  • github:https://github.com/kenwheeler/slick

  • 官方网站:http://kenwheeler.github.io/slick/

  • star:17k+

  • Install:

      Bower: bower install slick-carousel --save
      npm: npm install slick-carousel
      CDNs:
      https://cdnjs.com/libraries/slick-carousel
      https://www.jsdelivr.com/projects/jquery.slick
    
    
  • 大小:40 KB

  • 功能介绍:

    slick 是一个功能异常强大的一个图片滑动切换效果库,接口丰富,支持各种动画和各种样式的切换滑动,唯一的缺点就是基于jQuery,基本废了,现在没人喜欢用jQuery,该淘汰了。。。支持 RequireJS 以及 Bower 安装。

swipe – 非常轻量级的一个图片滑动切换效果库

  • github:https://github.com/lyfeyaj/Swipe

  • 官方网站:http://lyfeyaj.github.io/swipe/

  • star:200+

  • Install:

      Bower: bower install swipe-js  --save
      npm: npm install swipe-js
    
    
  • 大小:5 KB

  • 功能介绍:

    swipe:非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb。可以结合 jQuery、RequireJS 使用。

Slideout.js – 触摸滑出式 Web App 导航菜单

  • github:https://github.com/mango/slideout

  • 官方网站:https://slideout.js.org/

  • star:6k+

  • Install:

      npm:npm install slideout
      spm:spm install slideout
      bower:bower install slideout.js
      component:component install mango/slideout
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script>
    
    
  • 大小:4 KB

  • 功能介绍:

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单。它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它。它支持不同的 CSS3 转换和过渡。最重要的是,它只是4KB 。

SweetAlert – 替代 Alert 的漂亮的提示效果

  • github:https://github.com/t4t5/sweetalert

  • 官方网站:http://t4t5.github.io/sweetalert/

  • star:15k+

  • Install:

      bower:bower install sweetalert
      npm:npm install sweetalert
      <script src="dist/sweetalert.min.js"></script>
      <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
    
    
  • 大小:16 KB

  • 功能介绍:

    Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择,可以灵活控制。

  • 类似插件:limonte/sweetalert2,好像这个最近还在更新,这个感觉更漂亮,大同小异,这里不多做介绍。

  • github:https://github.com/limonte/sweetalert2

  • **官方网站:

    https://limonte.github.io/sweetalert2/**

Awesomplete.js - 比datalist更强大更实用,零依赖的简单自动补全插件

  • github:https://github.com/leaverou/awesomplete/

  • 官方网站:http://leaverou.github.io/awesomplete/

  • star:5k+

  • Install:

      npm: npm install awesomplete
    
    
  • 大小:5 KB

  • 功能介绍:

    Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建。你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置更多选项),您可以用几行 JS 代码,提供更多的自定义。

Cleave.js – 自动格式化表单输入框的文本内容

  • github:https://github.com/nosir/cleave.js/

  • 官方网站:http://nosir.github.io/cleave.js/

  • star:6k+

  • Install:

      npm:npm install --save cleave.js
      bower:bower install --save cleave.js
    
    
  • 大小:11.1 KB

  • 功能介绍:

    Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容。 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性。通过使用这个库,您不需要编写任何正则表达式来控制输入文本的格式。然而,这并不意味着取代任何验证或掩码库,你仍应在后端验证数据。它支持信用卡号码、电话号码格式(支持各个国家)、日期格式、数字格式、自定义分隔符,前缀和块模式等,提供 CommonJS/AMD 模式以及ReactJS 组件端口。

Immutable.js – JavaScript 不可变数据集合(Facebook出品)

  • github:https://github.com/facebook/immutable-js

  • 官方网站:http://facebook.github.io/immutable-js/

  • star:18k+

  • Install:

      npm install immutable --S-D
    
    
  • 大小:60 KB

  • 功能介绍:

    不可变数据是指一旦创建就不能被修改的数据,使得应用开发更简单,允许使用函数式编程技术,比如惰性评估。Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表。Immutable.js 提供持久化的列表、堆栈、Map, 以及 OrderedMap 等,最大限度地减少需要复制或缓存数据。

Popmotion.js – 小巧,灵活的 JavaScript 运动引擎

  • github:https://github.com/Popmotion/popmotion

  • 官方网站:https://popmotion.io/

  • star:3k+

  • Install:

      npm install --save popmotion
      import { tween } from 'popmotion';
    
    
  • 大小:12 KB

  • 功能介绍:

    Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmotion 网站上有很多很赞的效果,赶紧去体验一下。

Dynamics.js - 创建逼真的物理动画的 JS 库

  • github:https://github.com/michaelvillar/dynamics.js

  • 官方网站:http://dynamicsjs.com/

  • star:6k+

  • Install:

      npm: npm install dynamics.js
      bower: bower install dynamics.js
    
    
  • 大小:20 KB

  • 功能介绍:

    Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmotion 网站上有很多很赞的效果,赶紧去体验一下。

Rainyday.js – 使用 JavaScript 实现雨滴效果

在github的dist目录下载rainyday.min.js

  • 大小:10 KB

  • 功能介绍:

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画。Rainyday.js 有功能可扩展的 API,例如碰撞检测和易于扩展自己的不同的动画组件的实现。它是一个使用 HTML5 特性纯 JavaScript 库,支持大部分现代浏览器。

Swiper – 经典的移动触摸滑块轮播插件

  • github:https://github.com/nolimits4web/Swiper

  • 官方网站:http://idangero.us/swiper/

  • star:11.8k+

  • Install:

      在github上下载
    
    
  • 大小:暂不确定,按需引入

  • 功能介绍:

    Swiper 是移动 Web 开发中最常用的滑块插件,是一款免费的,最现代化的移动触摸滑块,支持硬件加速的转换和惊人的原生表现。它的目的是在移动网站,移动 Web 应用程序和 Hygrid 混合应用程序中使用。最初的设计主要是为 iOS,但同时也支持最新的 Android,Windows Phone 8 和现代的桌面浏览器。

Snabbt.js – 极简的 JavaScript 动画库

  • github:https://github.com/daniel-lundin/snabbt.js

  • 官方网站:http://daniel-lundin.github.io/snabbt.js/

  • star:5k+

  • Install:

      bower:bower install snabbt.js
      npm:npm install snabbt.js
      CDNs:
      https://cdnjs.com/libraries/snabbt.js
      http://www.jsdelivr.com/#!snabbt
    
    
  • 大小:16 KB

  • 功能介绍:

    Snabbt.js 是一个简约的 JavaScript 动画库。它会平移,旋转,缩放,倾斜和调整你的元素。通过矩阵乘法运算,变换等可以任何你想要的方式进行组合。最终的结果通过 CSS3 变换矩阵设置。

imagesLoaded – 检测网页中的图片是否加载完成

  • github:https://github.com/desandro/imagesloaded

  • 官方网站:http://imagesloaded.desandro.com/

  • star:6k+

  • Install:

      Bower: bower install imagesloaded --save
      npm: npm install imagesloaded
      CDNs:
      <script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
      <script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>
    
    
  • 大小:5 KB

  • 功能介绍:

    imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库。支持回调的获取图片加载的进度,还可以绑定自定义事件。可以结合 jQuery、RequireJS 使用。

Fort.js – 时尚、现代的表单填写进度提示效果

  • github:https://github.com/idriskhenchil/Fort.js

  • 官方网站:https://github.com/idriskhenchil/Fort.js

  • star:800+

  • Install:

      CDN:
      css:
      https://cdnjs.cloudflare.com/ajax/libs/Fort.js/2.0.0/fort.min.css
      js:
      https://cdnjs.cloudflare.com/ajax/libs/Fort.js/2.0.0/fort.min.js
    
    
  • 大小:6 KB

  • 功能介绍:

    Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果,满足开发的各种场合需要。

MagicSuggest – Bootstrap 主题的多选组合框

  • github:https://github.com/nicolasbize/magicsuggest

  • 官方网站:http://nicolasbize.com/magicsuggest/

  • star:1k+

  • Install:

      github自行进行下载
    
    
  • 大小:21.8 KB

  • 功能介绍:

    MagicSuggest 是专为 Bootstrap 主题开发的多选组合框。它支持自定义呈现,数据通过 Ajax 异步获取,使用组件自动过滤。它允许空间免费项目,也有动态加载固定的建议。

Numeral.js – 格式化和操作数字的 JavaScript 库

  • github:https://github.com/adamwdraper/Numeral-js

  • 官方网站:http://numeraljs.com/

  • star:4k+

  • Install:

      npm: npm install numeral
      CDNs:
      <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    
    
  • 大小:10 KB

  • 功能介绍:

    Numeral.js 是一个用于格式化和操作数字的 JavaScript 库。数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大。支持包括中文在内的17种语言。

  • Demo:

      var myNumeral = numeral(1000);
    
      var value = myNumeral.value();
      // 1000
    
      var myNumeral2 = numeral('1,000');
    
      var value2 = myNumeral2.value();
      // 1000
    
    

Draggabilly – 轻松实现拖放功能(Drag & Drop)

  • github:https://github.com/desandro/draggabilly

  • 官方网站:http://draggabilly.desandro.com/

  • star:2k+

  • Install:

      Bower: bower install draggabilly --save
      npm: npm install draggabilly
      CDNs:
      <script src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.min.js"></script>
      <script src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.js"></script>
    
    
  • 大小:5 KB

  • 功能介绍:

    Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能。只需要简单的设置参数就可以在你的网站用添加拖放功能。兼容 IE8+ 浏览器,支持多点触摸。可以灵活绑定事件,支持 RequireJS 以及 Bower 安装。

Quill – 可以灵活自定义的开源的富文本编辑器

  • github:https://github.com/quilljs/quill/

  • 官方网站:https://quilljs.com

  • star:12k+

  • Install:

      npm: npm install quill
      CDNs:
      <!-- Main Quill library -->
      <script src="//cdn.quilljs.com/1.0.0/quill.js" type="text/javascript"></script>
      <script src="//cdn.quilljs.com/1.0.0/quill.min.js" type="text/javascript"></script>
    
      <!-- Theme included stylesheets -->
      <link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
      <link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet">
    
      <!-- Core build with no theme, formatting, non-essential modules -->
      <link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet">
      <script src="//cdn.quilljs.com/1.0.0/quill.core.js" type="text/javascript"></script>
    
    
  • 大小:需求不同,大小不同

  • 功能介绍:

    Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题。如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求。

Quill 旨在通过把自身组织成模块,并提供了强大的 API 来构建额外的模块来解决这个问题。它也并没有规定你用样式来定义编辑器皮肤。Quill 还提供了所有你希望富文本编辑器说用于的功能,包括轻量级封装,众多的格式化选项,以及广泛的跨平台支持。

basket.js – 基于 LocalStorage 的资源加载器

  • github:https://github.com/addyosmani/basket.js

  • 官方网站:https://addyosmani.com/basket.js/

  • star:2k+

  • Install:

      Bower: bower install basket.js --save
      npm: npm install basket.js
    
    
  • 大小:4 KB

  • 功能介绍:

    basket.js是一款基于 LocalStorage 的资源加载器,可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存。

scrollReveal.js – 使元素以非常酷帅的方式进入画布 (Viewpoint)

  • github:https://github.com/jlmakes/scrollreveal

  • 官方网站:https://scrollrevealjs.org/

  • star:12k+

  • Install:

      Bower: bower install scrollreveal --save
      npm: npm install scrollreveal
      CDNs:
      <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    
    
  • 大小:8 KB

  • 功能介绍:

    scrollReveal.js 是一个用于使元素以非常酷帅的方式进入画布的 JavaScript 工具库。轻量级,高性能,无依赖的一个小巧酷炫的库。

moment.js – 一款轻量级的Javascript日期处理类库

  • github:https://github.com/moment/moment/

  • 官方网站:http://momentjs.com/

  • star:30k+

  • Install:

      bower install moment --save # bower
      npm install moment --save   # npm
      yarn add moment             # Yarn
      Install-Package Moment.js   # NuGet
      spm install moment --save   # spm
      meteor add momentjs:moment  # meteor
    
    
  • 大小:16.6 KB

  • 功能介绍:

    moment.js是一个轻量级的JavaScript库日期解析、验证操作,格式化日期的库。

  • Demo:

    效果预览地址:http://momentjs.com/

infinite-scroll – 一款滚动加载按需加载的轻量级插件

</article>


上一篇

JEEP指南者备忘

Comments

Like

Issue Page

Error: Comments Not Initialized

<nav class="gitment-editor-tabs" style="padding: 0px; margin: 0px 0px -1px -1px; box-sizing: border-box;">Write

Preview </nav>

Login

with GitHub

<textarea placeholder="Leave a comment" title="Login to Comment" disabled="" style="box-sizing: border-box; display: block; width: 733px; min-height: 150px; max-height: 500px; padding: 16px; resize: vertical; max-width: 100%; margin: 0px; font-size: 14px; line-height: 1.6; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); vertical-align: middle; border: none; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; outline: none; box-shadow: none; overflow: visible; cursor: not-allowed;"></textarea>

Styling with Markdown is supportedComment

Powered by

Gitment

目录

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,049评论 25 707
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,360评论 2 44
  • 作者:谢枫华 动画监督宫地昌幸(千与千寻监督助手、亡念的扎姆德监督)作为嘉宾出席TBS广播『荻上チキ・Sessio...
    AnimeTamashii阅读 569评论 0 1
  • 主教,我写给你的信其实是书信,是我本来打算亲手给你的,但是最后没有机会给你,我不知道你会不会看到,也不知道你什么时...
    Roby枫落阅读 454评论 0 0