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

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

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

0 /31

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

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

1 /31

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

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

DEMO：https://scrollrevealjs.org/

2 /31

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

DEMO：http://francisco.dance/

3 /31

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

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

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

4 /31

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

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

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

5 /31

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

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

6 /31

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

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

7 /31

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

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

8 /31

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

DEMO：http://substance.io/

9 /31

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

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

10 /31

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

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

11 /31

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

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

12 /31

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

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

13 /31

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

DEMO：https://formbuilder.online/

14 /31

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

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

15 /31

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

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

16 /31

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

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

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

17 /31

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

18 /31

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

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

19 /31

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

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

20 /31

Push.js是一个跨浏览器的Javascript桌面通知插件DEMO：http://nickersoft.github.io/push.js/

21 /31

Bideo.js是一个Javascript库，能非常轻易添加全屏背景视频到网页DEMO：https://rishabhp.github.io/bideo.js/

22 /31

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

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

23 /31

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

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

24 /31

flatpickr基于vanilla Javascript框架，是一个轻量级的日期标记和日历插件DEMO：https://chmln.github.io/flatpickr/

25 /31

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

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

26 /31

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

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

27 /31

Cleave.js会在你输入时格式化你的<input/>标签里面的内容DEMO：http://nosir.github.io/cleave.js/

28 /31

Skippr是一个超级简单的jQuery轻量级幻灯片插件DEMO：http://austenpayan.github.io/skippr/

29 /31

iziModal.js是一个优雅的，响应式的，灵活和轻便的jQuery插件。DEMO：http://izimodal.marcelodolce.com/

30 /31

Lightgallery.js是一个功能齐全的JavaScript图像灯箱插件，没有任何依赖。DEMO：https://sachinchoolur.github.io/lightgallery.js/&&https://codepen.io/sachinchoolur/pen/qNyvGW

来自：dzineship.com

JavaScript裸体识别技术

观看演示

关于nude.js裸体识别脚本

从技术的角度上讲，nude.js使用了HTML5画布(Canvas)和WebWorker技术来操作图像进行分析。图像被复制到画布上，使用裸体识别算法进行比较，包括下面几种特征识别：

在图像中查找类似肤色的像素。
根据捕捉到的像素定位或构造皮肤位置。
分析皮肤位置判断是裸体或非裸体。
就裸露情况进行分级，判断是否属于裸露。

nude.js支持IE9+ (excanvas), Firefox 3.6+, WebKit引擎的浏览器(谷歌浏览器, Safari, Mobile Safari,Opera)。nude.js还支持对视频进行截屏分析。

nude.js的用法

首先要在你的页面上引入nude.js脚本，然后是需要分析的图片：

<!-- 对于不支持画布技术的IE -->
<!--[if IE]>
<script type="text/javascript" src="excanvas_r3/excanvas.compiled.js"></script>
<![endif]-->
<script src="nude.js/compressed/nude.min.js"></script><!-- 需要识别的图片 -->
<img src="dvt1.jpg" alt="Dita Von Tease" id="image1" onclick="onImageClick('image1');" />
<img src="dvt2.jpg" alt="Dita Von Tease" id="image2" onclick="onImageClick('image2');" />
<img src="dvt3.jpg" alt="Dita Von Tease" id="image3" onclick="onImageClick('image3');" />
<img src="dvt4.jpg" alt="Dita Von Tease" id="image4" onclick="onImageClick('image4');" />

nude.js的用法很简单，因为它只有两个方法：<code>load</code> 和 <code>scan</code>。其中 <code>load</code> 方法接受图片的 <code>id</code> 或图片本身，将其拷贝到画布里。而 <code>scan</code> 方法根据算法对画布数据进行分析，返回 <code>true</code> 或 <code>false</code>。

function onImageClick(node) {nude.load(node);// 扫描nude.scan(function(result){ alert(result ? "在" + node.id + "发现裸露图像!" : "非裸体");});
}

你可以想象出，这些过程是在浏览器里进行的，所以不要期望很迅速的得出结果。而且，很显然，图片尺寸是分析速度的一个重要因素。如果你的网站严重的依赖nude.js，小心那些大尺寸的图片。

裸体识别的结果

对于高质量的裸露女性的JPEG图片，这个小脚本检测成功率非常高。但对于暗色调或黑人皮肤却不是很成功。在我的测试中，nude.js没有识别出黑白裸露图像，也没有发现视频的色情影像(可能是我的视频清晰度不够)。

观看演示

不管怎么说，nude.js的表现还是很不错的，但总觉得这种技术还无法大规模使用。扫描图片需要时间，而且会卡住浏览器。因为nude.js(包括它使用的识别算法)对黑白图片和低质量的图片有缺陷，所以我不推荐在网站上大量的依赖这个脚本进行识别。

31 款轻量高效的开源 JavaScript 插件和库相关推荐

31款轻量高效的开源 JavaScript 插件和库
31款轻量高效的开源 JavaScript 插件和库目前有很多网站设计师和开发者喜欢使用由[url=http://www.kubiji.cn/forum-id261.html]JavaScript[ ...
2016年31款轻量高效的开源JavaScript插件和库
目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有 ...
2016年31款轻量高效的开源JavaScript插件和库（下）
目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有 ...
2016年31款轻量高效的开源 JavaScript 插件和库
为什么80%的码农都做不了架构师?>>> 目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常 ...
2016 年 31 款轻量高效的开源 JavaScript 插件和库
2019独角兽企业重金招聘Python工程师标准>>> 目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘 ...
轻量高效的开源JavaScript插件和库【转】
图片布局轮播图弹出层音频视频编辑器字符串表单存储动画时间其它加载器构建工具测试包管理器 CDN 图片 baguetteBox.js- 是一个简单易用的响应式图像灯箱效果脚 ...
开源应用中心 | 这款轻量简洁的开源论坛系统，你get了没？
1. 背景如果你想搭建一个论坛系统,可能有很多的开源论坛系统可以满足你的需求.但你是否感觉很多的论坛系统都过于臃肿了,在论坛系统的核心功能上堆积了很多比较鸡肋的功能,占用大量的系统资源导致花费不必要 ...
开源JavaScript插件和库速查表
图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本.demo Lightgallery.js - 是一个功能齐全的JavaScript图像灯箱插件.demo viewerj ...
建立ssr服务器_如何从零打造一款轻量且天然支持SSR的个人博客系统?
2年前笔者开发了一款基于 nodejs 的全栈开源 cms 系统 XPCMS, 主要是为了解决技术开发者搭建自身内容平台的局限以及降低使用成本, 虽然1.0版本已经完成, 但是从整体部署和二次开发的便 ...

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

JavaScript裸体识别技术

关于nude.js裸体识别脚本

nude.js的用法

裸体识别的结果

31 款轻量高效的开源 JavaScript 插件和库相关推荐

最新文章

热门文章