js特效插件大全 js特效素材网 收藏 0

Duang特效插件：duang.js

不知道怎么的，这两天看到各种新闻都夹杂着“Duang”新词，不管是科技新闻还是娱乐新闻，“Duang”的身影如影随形，这个“Duang”究竟从何而来？是怎么火的？我特意查询了一下，原来是这么回事：

（摘自互联网对Duang的描述）

这次恶搞的主要内容来自成龙的一段采访视频：“当我第一次知道要拍洗发水广告的时候，其实我是拒绝的……导演跟我讲，拍完加特技，头发很黑很亮很柔……之后呢，头发duang duang duang”随后，成龙微博被大量网友用“duang duang ”留言攻陷。2月26日晚间，成龙在转发微博时用“duang”自嘲又引发了大量网友围观。段子手和网友们也都“再接再厉”，尽情发挥，相继编出了各种有趣的延伸版本，奠定了“duang”在2015年新年后的第一网络热词的地位。

更有趣的是，切图网率先根据“Duang”的解释“加特效”完成了一次概念到视觉效果的展现，将网页中的dom元素，通过js模拟了弹性物体向地面掉落时候的情景，“duang duang duang”不停。

已经集成为一款jQuery插件，支持回调函数，和延时Duang~

duang插件：http://www.qietu.com/p/duang.js

推荐7个高性能JavaScript代码高亮插件

对于喜欢写技术博客的同学来说，一定对代码高亮组件非常熟悉。一款优秀的JavaScript代码高亮插件，将会帮助你渲染任何一种编程语言，包括一些关键字的着色，以及每行代码的缩进等。今天我们要来分享一些高性能的JavaScript代码高亮插件，这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示。

SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件，SyntaxHighlighter 可以对大部分编程语言进行着色渲染，而且代码高亮的性能也非常不错。SyntaxHighlighter 可以自定义主题文件，在初始化的时候指定自己喜欢的主题即可。

官方网站：http://alexgorbatchev.com/SyntaxHighlighter/

Google Code Prettify是一款由Google推出的JavaScript代码高亮插件，Google Code Prettify可以对C/C++, Java, Python, Ruby, PHP, VisualBasic, AWK, Bash, SQL, HTML, XML, CSS, JavaScript, Makefiles和部分Perl编程语言代码高亮着色。

官方网站：http://code.google.com/p/google-code-prettify/

highlight.js是一个用于在任何web页面上高亮着色显示各种示例源代码语法的JavaScript项目。具有以下特色：

• 支持 92 种语言，49 种代码格式化风格。
• 自动检测语言种类
• 支持多语言混合的代码高亮
• 支持Node.js
• 支持使用任何HTML标记
• 兼容任意js框架

官方网站：https://highlightjs.org/

Prism.JS是目前最为轻量级的JavaScript代码高亮插件，他压缩后只有2KB的大小，Prism.JS也支持大部分流行的编程语言，并且支持多种主题样式，开发者只需要引用CSS文件和JS文件即可完成。

官方网站：http://prismjs.com/

这款代码高亮插件是基于jQuery的，同样也是轻量级的，渲染速度非常快。同时jQuery.Syntax还具有wordpress的插件应用，对于个人博主来说，使用wordpress和jQuery.Syntax可以完美实现0代买的高亮功能。

官方网站：http://www.codeotaku.com/projects/jquery-syntax/index.en

DlHighlight是基于JavaScript的代码高亮插件，非常简单，目前只支持JavaScript, CSS, XML, HTML。

官方网站：http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine

Rainbow 是JavaScript开发的语法高亮工具。被设计为轻量级（压缩后仅1.4 kb），使用简单，可扩展。语法高亮主题完全通过CSS定义。基于正则表达式实现。

官方网站：http://craig.is/making/rainbows

这几个JavaScript代码高亮插件都是比较常用的，如果你有更优秀的代码高亮插件，欢迎告诉我们。

本文作者：码农网– 小峰

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

25个可遇不可求的jQuery插件

随着jQuery插件在网站建设过程中的使用率不断的增加，所以有必要跟进时代步伐开发出一些新的插件/代码片段，以此来巩固并提高前端用户体验，将用户体验提升到一个新的高度。

接下来所推荐的这些插件中有滑块、地图、图片旋转块等等，可以说是最好的、完全免费的jQuery插件。

1. Flat jQuery Price Slider

实例|下载

这个jQuery价格滑块可以在一定范围内选择需要的价钱，不管你是做开发项目的还是设计项目，它都会起很大的作用。记住，这个插件完全免费。

2. Gmaps jQuery Map Plugin

实例|下载

GMaps.js是一个JavaScript插件，通过它可以很容易地在你的应用程序中使用谷歌地图，并包含了多个选项，如地图、方向、信息框等等。它的脚本是由很少的代码和简洁文档构成的。因为安装操作很简单，所以要想让代码实现功能就得自己动手。

3. FormChimp—MailChimp Ajax plugin for jQuery实例|下载

FormChimp是jQuery里的一个可定义的MailChimp Ajax插件，为用户提供一个简便的注册方式，这样的话用户在你的MailChimp列表里注册就不是一件麻烦的事了。

4. OWL Carousel

实例|下载

此jQuery插件具有的触摸功能可以让用户创建出好看的响应式旋转滑块。

5. jQuery Spellchecker

实例|下载

这个轻量级的jQuery插件能检查文本文档里的单词拼写的正确性，主要是用在一个表单字段里或者是在DOM目录里。

6. Chart js

下载

Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型：折线图、条形图、雷达图、饼图、柱状图和极地区域区。而且，这是一个独立的包，不依赖第三方JavaScript 库，小于 5KB。颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫。

7. Email-autocomplete

实例|下载

这个插件会建议你或者是直接在邮件地址栏里自动填写完域名。

8. Draggabilly

实例|下载

你可以用这个插件做一些可拖动的jQuery代码片段。

9. Interact.js

实例|下载

这是一个为电脑和移动设备上的浏览器而制作的可拖放、重置大小、调整手势的插件。

10. Sortable

实例|下载

它是一个极简单的JavaScript类库，主要是为现代浏览器和触摸设备而制定的。

11. rowGrid.js

实例|下载

大小只有800bytes gzipped的轻量级jQuery插件用处是把图片或其它项目排版在连续的行内。

12. Scattered Polaroid gallery

实例|下载

这个插件可以在容器里随机排版这些相片，当你选中了一个项目的时候它就会移动到屏幕中间，其它项目自动闪到旁边。

13. Viewport Image Resize

实例|下载

操作上比较简单，没有任何麻烦，重新设置图像大小和对图片进行修剪，这些都是基于pseudo视图而做的。

14. jQueryUI Limitslider

实例|下载

这一滑块插件允许在一条选择线上做出多个滑块，这些滑块可以用来代表位置、尺寸、举例等等，同时还可以在滑块上做标签或者是悬浮标题。

15. Freewall

实例|下载

Freewall是一个跨浏览器、响应式的jQuery插件，可以创建出多种多样适用在电脑、移动设备和平板电脑上的网格布局。

16. jQuery fontIconPicker

实例|下载

这个只有1.58kb gzipped大小的插件，可以让用户创建一个带有搜索功能的简单的图标选择器放在管理列表里。

17. Bootstrap-dialog

实例|下载

这个插件会让用户使用Bootstrap的模型更加熟练。

18. jquery.tabelizer

实例|下载

Tabelizer 1.0.3—用在表格上的多层次分组指标器。

19. Facebook Badge Jquery Plugin

实例|下载

FaceBadge可以在用户网站上添加了一个Facebook页面标记，用起来更省事。

20. Croppic

项目网页

这是一个用来裁剪图片的jQuery插件，效果超出你想象。

21. JQuery Plugin for Google Drive API

实例|下载

这个插件主要是为了让在不同设备上的Google Drive能够同步协作，传输文件等等，包括是Android设备。

22. Pick-a-Color

实例|下载

这项插件的设计之初就是希望所有人都能使用它，它的界面主要是基于Twitter Bootstrap的风格而设计，所以看起来比较亲切。

23. Simple Vertical Menu

下载代码

看上去很简单，但是很时髦的一个插件，使用了一些CSS3和jQuery技术，拥有自定义字体和令人影响深刻的标记图案。

24. jQuery Message Form

下载代码

这只是一个很小的字符计数器的实验版本。

25. Magnifying Glass Plugin with jQuery and CSS3项目主页

这是一个简单的小插件，基于TCP的排版设计。

原文来自：DesignScrazed

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