个人使用过的前端插件,做个简单的介绍

2020/08/16 17:29:05MasterYi

声明

MasterYi博客文章都为原创,如需转载请复制声明原文地址博客入口http://www.masteryi.cn,感谢您的驻足!

前言

记录一下个人使用过的前端插件,此篇不介绍富文本和前端整体框架,希望对大家有所帮助,会持续补充。日后补充对每个插件的使用和demo


1.swiper-轮播图

官网地址:https://www.swiper.com.cn/

简介:

swiper轮播图插件是一套纯javascript打造的滑动插件,面向移动、平板电脑等设备。免费开源的,上手简易,官网教程很完整。


2.Animate.css-动画库

官网地址:https://animate.style/
中文网地址:http://www.animate.net.cn/

简介:

一套纯css动画库,兼容性高,上手使用简易,只需加上动画的class名称即可。


3.Fullpage.js-全屏滚动插件

中文网地址:http://fullpage.81hu.com/

简介:

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。对于制作内容简洁,逼格高的门户网站时,使用fullpage是很不错的选择。


4.layer-弹出层

官网地址:https://layer.layui.com/

简介:

layer是一套比较全面的弹出层插件,内置有提示型、询问型、页面型、加载型、相册型...等等多种弹出层,并支持自由配置,允许拖拽。说到这个弹出插件不得不介绍一下他们的ui框架。layui 是一套很适合后端人员做后台页面时的UI框架,他们有单页版和iframe版直接购买,此框架对于数据化表格优化十分友好。


5.juqeryui 交互插件

官网地址:https://jqueryui.com/
中文网地址:https://www.jqueryui.org.cn/

简介:

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。我当初选择使用主要是实现元素拖拽排序sortable 。


6.jsmind -脑图,思维导图插件

github地址:http://hizzgdev.github.io/jsmind/developer.html

简介:

jsMind 是一个显示/编辑思维导图的纯 javascript 类库,其基于 html5 的 canvas 进行设计。jsMind 以 BSD 协议开源,在此基础上你可以在你的项目上任意使用。 这个插件我使用时是为了实现关系图谱。其每个元素中也支持html代码。jsmind提供基础的元素操作,拖拽,删除,添加,编辑,收起,展开一套接口。下方是一个简单的展现示例图,样式官方是支持自定义的。不过jsmind默认为弯曲型连接线,下方是我自己稍加改了变为直角线。


7.fullcalendar-日程管理插件

官网地址:https://fullcalendar.io/

简介:

一套全面的日程插件,可用其实现日程管理。可根据月,周,天显示日期,提供对每个时间节点的操作添加日程计划,所有添加的日程计也可使用其日程清单直接展现。此插件提供一套完整的操作接口及回调。可基于此插件开发项目日程管理,任务日程管理,OA日程管理都可以。


8.百度echarts-数据可视化框架

官网地址:https://echarts.apache.org/zh/index.html

简介:

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。提供市面上常见的多种图形数据可视化,K线图,柱形图,热点图...太多了不一一描述了,有几十种类型的图,每种图都有很多不同的案例,并处于持续更新的状态。


9.百度统计

官网地址:https://tongji.baidu.com/web/welcome/login

简介:

推荐使用的网页数据统计插件,只需要在百度统计注册账号放入一段js即可。百度统计具有详细的流量统计,分时间段、ip、新老客户记录、浏览时间、浏览的页面、进入的入口、记录非常全面的统计数据插件,并提供直观的数据可视化图表,不过数据保存在。我个人也在使用此插件。


10.pace.js-网站进度条

官网地址:https://github.hubspot.com/pace/docs/welcome/
github地址:https://github.com/HubSpot/pace

简介:

一个做网页加载进度条的插件,提供多种加载效果,我个人网站上方的加载进度也是用其实现的,可以自动的监听页面的加载,并且能够定制加载条。最重要的一点,它还可以监测到ajax的调用并且出现加载条提示。使用相当简单,引入js直接就有了,看官方一个demo,了解一下API的配置项可自由配置。


11.trun.js -翻书

官网地址:http://www.turnjs.com/

简介:

Turn.js是一个JavaScript库,利用HTML5的所有优点,可以使您的内容看起来像一本真正的书或杂志。基于HTML5的新用户界面使Web变得越来越漂亮。turn.js最适合基于HTML5的杂志,书籍或目录。

注意:使用前需要引用jQuery 1.3或更高版本。此插件兼容各种移动设备加PC,可实现鼠标翻书,点击翻书,滑动翻书。如果学过后端同学,自己写杂志编辑器肯定过于麻烦,不推荐。但是可以配合后端语言进行一些PDF转html的办法,turn翻书中支持html的元素,大部分企业的杂志也是使用PDF进行制作的。后端语言都有各自处理pdf的类包,这里就不一一介绍了


12.imagehover.css-鼠标悬停

官网地址:https://www.shejidaren.com/examples/imagehover-css/index.html
github地址:https://github.com/ciar4n/imagehover.css

简介:

Imagehover.css是精心制作的CSS库,可让您轻松实现可缩放的图像悬停展现文字的效果。从CSS库的40多种悬停效果类中选择。拥有一套很完整的悬停效果,使用非常简单引用css,加代码段即可。当前网站-API栏目中使用了此插件。

13.jquery.qrcode.js-生成二维码

英文网地址:http://jeromeetienne.github.io/jquery-qrcode/
中文网地址:http://www.jq22.com/jquery-info294

简介:

一个前端生成二维码的插件,使用简便,只需引用js,然后复制一行代码就ok了。

14.jQuery.mmenu-侧边滑动菜单

官网地址:https://mmenujs.com/wordpress-plugin/#menu
中文demo:http://www.jq22.com/jquery-info4694

简介:

学习较为简单,官网下载后有demo,英文的看的费劲可以进中文demo。主要是抽屉式菜单,允许多级,支持移动触摸滑动,支持栏目菜单搜索。国外的,注意:商用的话需要付费,个人的话是免费的

15.clipboardjs-内容复制

中文网地址:http://www.clipboardjs.cn/

简介:

实现js文本复制问题,拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的,它不应该依赖flash或者其他框架,应该保持简洁。这就是创造clipboard.js的原因和目的。解决了一些IOS复制,浏览器兼容的疑难杂症

16.jszip-前端压缩包

英文网址:https://stuk.github.io/jszip/

简介:

JSZip是一个JavaScript库,可以创建,读取,编辑压缩包。进行图片打包时想减轻服务器压力,可以使用前端来进行一些压缩包操作。

17.FileSaver.js-文件导出

网址:https://www.jq22.com/jquery-info11353

简介:

纯js的前端文件下载插件,可进行各类文件的下载,在最新谷歌浏览器支持最高可达2G,此地址拥有一个demo。

全部留言 1
masteryi.com.cn ICP证:湘ICP备19018432号-1   masteryi.cn ICP证:湘ICP备19018432号-2