前端插件库【原】 2016-08-21

自己整理的一些质量还可以的前端插件,各种分类的都有,工作中需要用到插件时可以在下面的列表中查找。

1.幻灯片

Camera    a free jQuery slideshow by Pixedelic

http://www.pixedelic.com/plugins/camera/

FlexSlider2    An awesome, fully responsive jQuery slider toolkit

http://flexslider.woothemes.com/

Flickity    Touch, responsive, flickable galleries

http://flickity.metafizzy.co/

Owl Carousel2     Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider

http://www.owlcarousel.owlgraphic.com/

PhotoSwipe    JavaScript gallery, no dependencies

http://photoswipe.com/

Roundabout    a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas

https://github.com/fredleblanc/roundabout

Swiper    Mobile touch slider & framework with hardware accelerated transitions

http://www.idangero.us/swiper

http://www.swiper.com.cn/

2.相册

baguetteBox    Simple and easy to use lightbox script written in pure JavaScript

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

Colorbox    a jQuery lightbox

http://www.jacklmoore.com/colorbox/

fancyBox    丰富的弹出层效果插件

http://www.fancybox.net/    v1.3.1

http://www.fancyapps.com/fancybox/    v2.1.5

Lightbox    The original lightbox script

http://www.lokeshdhakar.com/projects/lightbox2/

prettyPhoto    a jQuery lightbox clone

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto

Swipebox    A touchable jQuery lightbox

http://brutaldesign.github.io/swipebox/

turn.js    Make a flip book with HTML5

http://www.turnjs.com/

3.图片

background-blur    Ultra light cross browser image blurring plugin for jQuery

http://msurguy.github.io/background-blur/

Cloud Zoom    a super-smooth, touch-enabled jQuery image zoom plugin used on many high profile retail sites

http://www.starplugins.com/cloudzoom

http://download.csdn.net/detail/china_skag/6978965#comment

grayscale    “Grayscaling” in non-IE browsers

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

imagesLoaded    JavaScript is all like "You images done yet or what?"

http://imagesloaded.desandro.com/

Jcrop    the jQuery Image Cropping Plugin

http://deepliquid.com/content/Jcrop.html

LazyLoad

http://www.appelsiini.net/projects/lazyload

4.动画

Animate.css   A cross-browser library of CSS animations. As easy to use as an easy thing

http://daneden.github.io/animate.css/

 

Caption Hover Effects        A tutorial on how to create some subtle and modern caption hover effects.

http://tympanus.net/Tutorials/CaptionHoverEffects

CSSShake    Some CSS classes to move your DOM!

http://elrumordelaluz.github.io/csshake/

GridLoadingEffects   Some inspiration for loading effects of grid items using CSS animations

http://tympanus.net/Development/GridLoadingEffects/

Hover Effect Ideas        An inspirational collection of subtle hover effects

http://tympanus.net/Development/HoverEffectIdeas

iHover    CSS3 hover effects pack

http://gudh.github.io/ihover/dist/index.html

ImageGridEffects    Some inspiration for effects on image grids

http://tympanus.net/Development/ImageGridEffects/

jquery.rotate    simple plugin that add css rotate property and animation

http://www.jq22.com/jquery-info375

jquery.transit    Some CSS classes to move your DOM!

http://ricostacruz.com/jquery.transit/#top

PerspectivePageViewNavigation    Transforms the page in 3D to reveal a menu

http://tympanus.net/Development/PerspectivePageViewNavigation/

ShapeHoverEffectSVG    Recreating the effect as seen on The Christmas Experiments

http://tympanus.net/Tutorials/ShapeHoverEffectSVG/index.html

SVGRipples    Google Material Design Ripple Effect with SVG

http://tympanus.net/Tutorials/SVGRipples/

Textillate    AsimplepluginforCSS3textanimations

https://jschr.github.io/textillate/

TextStylesHoverEffects

http://tympanus.net/Development/TextStylesHoverEffects/

ThumbnailGridEffects    show you some inspiration for thumbnail effects using CSS animations

http://tympanus.net/Development/ThumbnailGridAnimations/

5.层

artDialog    经典的网页对话框组件,内外皆用心雕琢

http://demo.jb51.net/js/2011/artDialog/index.html

v4.1.7

http://aui.github.io/artDialog/doc/index.html

v6.0.4

DialogEffects    A small collection of dialog effects using CSS animations for your inspiration

http://tympanus.net/Development/DialogEffects/index.html

Fullscreen Overlay Styles & Effects

http://tympanus.net/Development/FullscreenOverlayStyles/

layer    一个让你想到即可做到的web弹窗/层 解决方案

http://layer.layui.com/

poshytip

http://vadikom.com/demos/poshytip/

Toolbar    A jQuery plugin that creates tooltip style toolbars

http://paulkinzett.github.io/toolbar/

Nifty Modal Window Effects    Some inspiration for different modal window appearances

http://tympanus.net/Development/ModalWindowEffects/

6.时间

datetimepicker    jQuery Plugin Date and Time Picker

http://xdsoft.net/jqplugins/datetimepicker/

FlipClock

http://www.flipclockjs.com/

jCountdown    倒计时插件

http://codecanyon.net/item/jcountdown-mega-package/full_screen_preview/3443480

layDate    做一款低调的网页日期控件

http://sentsin.com/layui/laydate/

pickadate    The mobile-friendly, responsive, and lightweightjQuery date & time input picker

http://amsul.ca/pickadate.js/

7.图表

Highcharts    功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库

http://www.hcharts.cn/index.php

ECharts    Enterprise Charts

http://echarts.baidu.com/index.html

 

8.排版

Arctext    Curving Text with CSS3 and jQuery

http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/

draggabilly    Make that shiz draggable

http://draggabilly.desandro.com/

fullPage    One Page Scroll sections Site Plugin

https://github.com/alvarotrigo/fullPage.js

on desktop and mobile device

Masonry    a JavaScript grid layout library

http://masonry.desandro.com/

mCustomScrollbar    Highly customizable custom scrollbar jQuery plugin

http://manos.malihu.gr/jquery-custom-content-scroller/

pdf.js    PDF Reader in JavaScript

https://github.com/mozilla/pdf.js

perfect-scrollbar    Minimalistic but perfect custom scrollbar plugin

http://noraesae.github.io/perfect-scrollbar/

9.组件

CreativeButtons    Modern and subtle styles & effects for buttons (hover and click)

http://tympanus.net/Development/CreativeButtons/

CreativeLinkEffects    Subtle and modern effects for links or menu items

http://tympanus.net/Development/CreativeLinkEffects/

fakeLoader.js    a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect

http://joaopereirawd.github.io/fakeLoader.js/

IconHoverEffects    Simple hover effects for circular icons

http://tympanus.net/Development/IconHoverEffects/

jPlayer    The jQuery HTML5 Audio / Video Library

http://www.jplayer.org/

jquery-knob    Nice, downward compatible, touchable, jQuery dial

https://github.com/aterrien/jQuery-Knob

jquery-plugin-circliful    jQuery circle statitic plugin

https://github.com/pguso/jquery-plugin-circliful

pace    Automatic page load progress bar

http://github.hubspot.com/pace/docs/welcome/

10.上传

html5-file-upload    HTML5 File Drag and Drop Upload with jQuery and PHP

http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/

plupload    At its core Plupload is visually flat and you can customize it however you like.

http://www.plupload.com/

uploadify    HTML5 or Flash Multiple File Upload jQuery Plugin Script

http://www.uploadify.com/

Web Uploader    由Baidu FEX团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件

http://fex.baidu.com/webuploader/

11.数据

JavaScript Cookie    A simple, lightweight JavaScript API for handling cookies

https://github.com/js-cookie/js-cookie

form    jQuery Form Plugin

https://github.com/malsup/form

jquery-validation    jQuery Validation Plugin

http://jqueryvalidation.org/

12.优化

DropKick    A JavaScript plugin for creating beautiful, graceful, and painless custom dropdowns

http://dropkickjs.com/

favico.js    Make use of your favicon with badges, images or videos

http://lab.ejci.net/favico.js/

Headroom    一个能在页面滚动时做出响应的轻量级、高性能的JS小工具

http://www.bootcss.com/p/headroom.js/

iCheck    Super customized checkboxes and radio buttons for jQuery & Zepto

http://fronteed.com/iCheck/

jQuery-menu-aim    jQuery plugin to fire events when user‘s cursor aims at particular dropdown menu items

https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html

jquery-placeholder    A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet

https://github.com/mathiasbynens/jquery-placeholder

jquery-smooth-scroll    Automatically make same-page links scroll smoothly

https://github.com/kswedberg/jquery-smooth-scroll

13.移动端

FastClick    a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers

https://github.com/ftlabs/fastclick

Hammer.js    a open-source library that can recognize gestures made by touch, mouse and pointerEvents

http://hammerjs.github.io/

Parallax    Parallax Engine that reacts to the orientation of a smart device

http://matthew.wagerfield.com/parallax/

Touch.js    baidu clouda event & gesture library

http://touch.code.baidu.com/

14.工具

clipboard.js    A modern approach to copy text to clipboard

https://clipboardjs.com/

FileSaver.js    An HTML5 saveAs() FileSaver implementation

https://github.com/eligrey/FileSaver.js

highlight.js    Syntax highlighting for the Web

https://highlightjs.org/

html2canvas    Screenshots with JavaScript

http://html2canvas.hertzen.com/

jquery-hz2py    jQuery汉字转拼音

http://www.jq22.com/demo/jquery-pinyin-150416210434/

jsPDF   HTML5 PDF Generator

https://parall.ax/products/jspdf

passwordStrength    jQuery密码强度检测插件

http://www.helloweba.com/view-blog-50.html

Prism    a lightweight, extensible syntax highlighter

http://prismjs.com/

RequireJS    JavaScript file and module loader

http://www.requirejs.org/

Sea.js    A Module Loader for the Web

http://seajs.org/docs/

ZeroClipboard    The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface

http://zeroclipboard.org/

类库

D3    Data-Driven Documents

http://d3js.org/

easing

http://gsgd.co.uk/sandbox/jquery/easing/

Raphael    JavaScript Vector Library

http://raphaeljs.com/

Snap    The JavaScript SVG library for the modern web

http://snapsvg.io/

three.js    Javascript 3D library

http://threejs.org/

Transit    Super-smooth CSS transitions & transformations for jQuery

http://ricostacruz.com/jquery.transit/

Velocity    Accelerated JavaScript animation

http://julian.com/research/velocity/

ZRender    一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型,让canvas绘图大不同!

http://ecomfe.github.io/zrender/

时间: 2024-10-11 05:29:39

前端插件库【原】 2016-08-21的相关文章

前端组件库大合集-必备收藏

前端组件库 搭建web app常用的样式/组件等收集列表(移动优先) 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for automating development workflow gulp – The streaming build system grunt – the JavaScript Task Runner F.I.S – 前端集成解决方案 前端模块管理器 Bower – A package manager for the w

搭建前端组件库(一)

本文梳理如何搭建和构建前端组件库. 了解几个问题 为何需要组件化? 大部分项目起源都是源于业务方的各种各样的奇葩需求.随着公司的业务发展,公司内部开始衍生出很多的B2C系统.后台系统,前端部门也疲于应对越来越多同质化的项目,这些项目在很多基础模块层.源代码存在不小的相似,甚至存在相似的业务模块. 笔者曾经所在的一个电商团队,前端成员基本每个人多做过登录注册.购物车.支付.微信登录...... 大量重复的业务代码.由于组内技术没有强制规范 本质上相同的东西,重复的去code就显得浪费. 分析这些问

FFMpeg ver 20160219-git-98a0053 滤镜中英文对照 2016.02.21 by 1CM

FFMpeg ver 20160219-git-98a0053 滤镜中英文对照 2016.02.21 by 1CM T.. = Timeline support 支持时间轴 .S. = Slice threading 分段线程 ..C = Command support 支持命令传送 A = Audio input/output 音频 输入/输出 V = Video input/output 视频 输入/输出 N = Dynamic number and/or type of input/out

前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务

由于某些众所周知的原因,好多开源的 JS 库采用的国外 CDN 托管方式在国内访问速度不如人意.所以我们特意制作了这个公益项目,托管了 CDNJS 的所有开源 JS 库以及反代了 Google Fonts.Ajax 和 Gravatar,并且全部支持 http 和 https 1.CDNJS 开源 JS 库 我们采用的方法是每天定时同步 CDNJS 的 Github(http://t.cn/REVf3N2) 所有的 JS/CSS 库可以在这儿找到您需要的链接 :https://cdnjs.cat

Django之前端插件定制之表头

什么是插件? 插件只是辅助,是开发过程中的一个阶段.一般项目一期会用各种插件,迅速将功能.界面搭出来,二期时就改成自己的代码了.大点的公司都有自己的js库,自己开发类似jquery的库. 那接下来就写一下关于前端表头的插件 urls.py from django.contrib import admin from django.urls import path from app01 import views from django.contrib.staticfiles.urls import

插件库-网站

以下是个人总结的很棒的前端插件网站,里面很多效果真的很棒啊有木有,爱不释手啊有木有.希望你可以慢慢啃,慢慢学习里面插件的写法,一定要挤出时间多看看大佬们的插件怎么写的. 覆盖面比较广泛,还有jquery学习文档,可以多看看(在资料库中). jQuery之家:http://www.htmleaf.com/ 主打特效的插件库,主要是jQuery,其他html,css,bs这种插件较少 http://www.jq22.com/ 比较广泛的插件库,不只是设计组件类的插件,还涉及UI,网页等代码,不过用户

web前端入门到实战:十个最流行的前端 CSS 库

前端 CSS 库,可以帮助用户分担样式设计,从而显著提高原型制作速度:用户则可以凭借前端框架,更加轻松地构建起直观的可用应用程序.目前市场上存在大量前端框架可供选择,本篇文章的主要内容就是关于那些目前最为流行且常用的框架. 为什么要使用 CSS 库,而不选择自定义 CSS?简而言之,时间是一种宝贵的资源,我们不该把它浪费在样式的构建身上.从零开始构建 CSS 是否性能好.效果佳?答案当然是肯定的.但除非您是位身经百战的 CSS 视觉创意人士,否则把这项工作交给专家才是最好的选择. 与此同时,框架

2016.09.21 公司裁员想到的

公司最近裁员,好多同事都走了. 想到了,不管在那里都要努力工作,成为该领域的专家,才能立于不败之地. 得之何喜,失之何忧. 加油,最好自己,无愧我心. 不断进步,不断上升 2016.09.21 晚 于北京朝阳

2016/02/21 codes

var Class = { create:function(){ var parent = null,properties = $A(arguments); if(Object.isFunction(properties[0])) parent = properties.shift(); function kclass(){ this.initialize.apply(this.arguments); } Object.extend(kclass,Class.Methods); kclass.s