文档章节

2016 年 31 款轻量高效的开源 JavaScript 插件和库

局长
 局长
发布于 2016/09/30 07:55
字数 1670
阅读 1W
收藏 658

目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能。其实,其中也有不少轻量级的插件和库,它们不仅轻巧有用,而且不会影响网站的性能。本文,就为大家整理了2016年以来30多款轻量级Javascript插件和库的列表,这些工具服务于特定的目标,并且它们能够非常有效和高效地实现目标。

不管你想创建一个图片库、一个滑动效果,个性化菜单还是其他接口元素,你都可以用这些插件和库轻易的实现。同时,你还可以使用这些插件为网站增加出色的功能,例如GIF和图片预览、吸引人的网站图标及其他。

这些插件和库都是非常简单的编码并且可以轻易实现。你以后肯定会发现它们对于你的Web项目非常有用。

0 baguetteBox.js
baguetteBox.js是一个简单易用的响应式图像灯箱效果脚本,而且在移动设备上支持滑动手势,完全使用Javascript编写。(压缩后大约2.7KB)

DEMO:https://feimosi.github.io/baguetteBox.js/

1 ScrollReveal
ScrollReveal插件使用户能够无比轻松地创建桌面和移动浏览器的网页滚动动画(压缩后大约3.3KB)

请各位自行打开DEMO页面感受一下动画效果。: )

DEMO:https://scrollrevealjs.org/

2 Marginotes
Marginotes,使用jQuery实现的添加旁注插件,快速,炫酷。

DEMO:http://francisco.dance/

3 Loud Links
LoudLinks是一个轻量级的JavaScript库用于添加交互声音到您的站点。它通过创建HTML5音频元素并用它来播放MP3或OGG音频文件来实现这个功能。(约1.5KB)

还是烦请各位打开下面的链接感受一下效果。: )

DEMO:http://loudlinks.rocks/#examples

4 Bricks.js
Bricks.js,是一款超快的用于固定宽度元素的“砖石”布局生成器

可以在DEMO页面输入所需的砖块个数,查看生成的效果(每次都会随机变化)

DEMO:http://callmecavs.com/bricks.js/

5 MediumEditor
MediumEditor,使用了Vanilla Javascript框架。MediumEditor是一个轻量级的(28KB)仿Medium.com的所见即所得在线编辑器工具栏。还有一个可用的MediumEditor扩展和主题。

DEMO:https://yabwe.github.io/medium-editor/

6 Philter
Philter可以让你通过使用HTML属性控制CSS滤镜,使用它之后,当你将光标移动到图片上的时候,图片上会加载CSS滤镜。无论是作为jQuery插件还是Vanilla Javascript框架都可用。

DEMO:http://specro.github.io/Philter/

7 SuperEmbed.js
SuperEmbed.js是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式元素(压缩后约1.6KB)

DEMO:https://jsfiddle.net/h6x04LuL/

8 Substance
Substance是一个基于Web的内容编辑JavaScript库。它给你提供所有你需要用于创建自定义编辑器和基于Web的发布系统的工具。

DEMO:http://substance.io/

9 List.js
List.js是一个轻量级的和快速的Vanilla JavaScript框架脚本,为列表、表格或其他任何HTMLL标签增加了搜索,排序,过滤器和灵活性等元素

DEMO:http://www.listjs.com/

10 jqGifPreview
jqGifPreview是一个简单的jQuery插件,用于创建GIF预览,就像你在Facebook上看到的。

  

DEMO:http://demo.sodhanalibrary.com/angular/gif_preview/jqGifPreview/demo.html

11 Datedropper.js
Datedropper.js是一个jQuery插件,为您提供了一种简单的方法用于在输入区域输入日期。

DEMO:http://felicegattuso.com/projects/datedropper/

12 jfMagnify
jfMagnify是一个jQuery插件用于在任何HTML元素创建放大镜效果,不仅仅是图像。

DEMO:https://github.com/fonstok/jfMagnify/tree/master/demo

13 jQuery formBuilder
jQuery formBuilder是一个新的jQuery插件,可通过拖放的方式快速生成表格

DEMO:https://formbuilder.online/

14 Popper.js
Popper.js是一个轻量级的库用于管理工具提示和弹窗效果。你可以快速轻易地使用一行代码放置工具提示控件。(压缩后约4KB)

  

DEMO:https://popper.js.org/

15 Image Blur Plugin
Image Blur Plugin是一个轻量级的跨浏览器jQuery插件,用于生成图像模糊效果

DEMO:https://msurguy.github.io/background-blur/

16 InlineTweet.js
InlineTweet.js,你可以通过它轻易地用网页上的任何文字创建一个推特链接。你所需要做的是用data-inline-tweet将推特文字包裹到一个容器

可以点击DEMO,体验该插件的效果

DEMO:http://ireade.github.io/inlinetweetjs/

17 iMissYou.js
iMissYou.js是个轻便小巧的jQuery插件用于当用户离开你的网页时,改变网页的标题和图标

18 SweetAlert2
SweetAlert2是一个颜值很高而且可以自定义的警告弹出窗口插件,可以代替Javascript的弹出窗口

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

19 Turntable.js
Turntable.js是一个响应式的jQuery滑块插件,会在当你的鼠标(或手指)扫过一个存放了一批图片的容器时产生翻转效果

DEMO:http://polarnotion.github.io/turntable/

20 Push.js
Push.js是一个跨浏览器的Javascript桌面通知插件

DEMO:http://nickersoft.github.io/push.js/

21 Bideo.js 
Bideo.js是一个Javascript库,能非常轻易添加全屏背景视频到网页

DEMO:https://rishabhp.github.io/bideo.js/

22 Microlight.js
Microlight.js是一个轻量级的代码高亮库,适用于任何编程语言,这大大提高了代码可读性(约2.2KB)

DEMO:https://asvd.github.io/microlight/

23 Algolia Places
Algolia Places是一个Javascript库,能让你在网页轻易实现搜索栏自动完成功能

DEMO:https://community.algolia.com/places/

24 flatpickr
flatpickr基于vanilla Javascript框架,是一个轻量级的日期标记和日历插件

DEMO:https://chmln.github.io/flatpickr/

25 Slidebars
Slidebars是一个jQuery框架,用于为你的网页或web应用添加off-canvas菜单和侧边栏

DEMO:https://www.adchsm.com/slidebars/

26 anime.js
anime.js是一个灵活轻便的JavaScript动画库。它通过CSS,独立变换,SVG,DOM属性和JS对象实现。这个GIF没有表现出它真正的效果,大家可以访问主页看一下,动画相当酷炫。

DEMO:http://codepen.io/collection/XLebem/

27 Cleave.js
Cleave.js会在你输入时格式化你的<input/>标签里面的内容

DEMO:http://nosir.github.io/cleave.js/

28 Skippr
Skippr是一个超级简单的jQuery轻量级幻灯片插件

DEMO:http://austenpayan.github.io/skippr/

29 iziModal.js
iziModal.js是一个优雅的,响应式的,灵活和轻便的jQuery插件。

DEMO:http://izimodal.marcelodolce.com/

30 Lightgallery.js
Lightgallery.js是一个功能齐全的JavaScript图像灯箱插件,没有任何依赖。

DEMO:https://sachinchoolur.github.io/lightgallery.js/ && https://codepen.io/sachinchoolur/pen/qNyvGW

来自:dzineship.com

© 著作权归作者所有

局长

局长

粉丝 860
博文 265
码字总数 501365
作品 0
深圳
私信 提问
加载中

评论(31)

污峰
污峰
good
小龘
小龘
不错 先藏着
子弹兄
子弹兄
得好好学习
御风林海
御风林海
支持
FutureElement
FutureElement
不错
angrytoro
angrytoro
真的赞。
Leaybc
Leaybc
点赞,收藏~
中小宇
中小宇
不错,收藏
craboy
craboy
果断收藏!
两说
两说
谢谢整理!辛苦
2016 年 11 月 12 个轻量级的 JavaScript 库

1. meSing.js meSing.js是一个一个JavaScript歌唱合成库,它使用Web Audio API的DSP功能与meSpeak.js语音合成库结合,为Web提供声乐合成器。 2. Flv.js flv.js是一个 HTML5 Flash Video (FLV...

pe_mail2006
2016/11/23
6.7K
12
推荐轻量高效无依赖的开源JS插件和库

在这里维持一个持续更新的地方 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js - 是一个功能齐全的JavaScript图像灯箱插件。demo viewerjs - 是一个图...

小弟调调™
2018/10/29
0
0
为什么放弃bootstrap改用完美支持IE8的前端框架?

在使用Bootstrap过程中,IE8显示不理想,默认的模式为手机效果,大大影响了用户体验,在国内IE8盛行的环境里,显得太过超前,根据国情,拼图开发出适应IE8的前端框架,先上效果图: 是不是觉...

拼图
2014/08/26
2.2W
11
让人期待的2011年度最佳 jQuery 插件发布啦

  近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架。jQuery 的易扩展性吸引了来自全...

Yamazaki
2012/05/02
89
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
3.4K
5

没有更多内容

加载失败,请刷新页面

加载更多

host machine and virtual machine communication between the three kinds of connection

1.桥接birdge模式 将虚拟机IP与物理机IP设在一个网段上,此时虚拟机相当于一台网络中与本地物理机公用一个HUB的独立设备。网络中其他机器与虚拟机、本地物理机与虚拟机都可以双向通信。虚拟机...

欣欣向荣666
20分钟前
24
0
Centos7安装gitblit

Gitblit介绍 Gitblit是一款开源工具,使用Java编写,用于管理、查看及服务于Git版本库。 Gitblit两种安装包 Gitblit GO:内部集成了Jetty服务器,不需要再集成其他容器,使用简单方便。(本文...

yhb890430
26分钟前
39
0
Ubuntu 安装 Source Code Pro 字体

1、解压字体 $ tar -zxvf source-code-pro-2.030R-ro-1.050R-it.tar.gz 2、解压字体 $ sudo cp -r source-code-pro-2.030R-ro-1.050R-it/TTF/ /usr/share/fonts/truetype/source-code-pro......

张小渔
28分钟前
53
0
mongo Authentication failed记录

虽然用的管理员账号,但是还是出现了以下的错误: 主要看后面的错误信息: { "ok" : 0.0, "errmsg" : "Authentication failed.", "code" : 18, "codeName" : "AuthenticationFailed" } 在想管......

woshixin
40分钟前
70
0
PHP+jPaginate插件制作无刷新分页实例

jPaginate是一款动感滚动分页插件,它的表现形式是像分页的按钮一样,有意思的是这些按钮却可以左右滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的左右滚动。 读取第一页数据: <d...

ymkjs1990
44分钟前
71
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部