值得H5前端学习的60个JS插件(含DEMO演示)

下面也可以说是H5前端学习的js插件大全。基本包含了大部分的前端最前沿的js插件和库。

1,布局

SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式元素。demo

ScrollReveal- ScrollReveal插件使用户能够无比轻松地创建桌面和移动浏览器的网页滚动动画。demo

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

2,图片预览

baguetteBox.js- 是一个简单易用的响应式图像灯箱效果脚本。demo

Lightgallery.js- 是一个功能齐全的JavaScript图像灯箱插件。demo

viewerjs- 是一个图像预览插件。demo

cropperjs- 是一个图片编辑器插件。demo

photo-editor- 是一个本地图片编辑器插件。demo

blazy.js- 是一个懒惰加载插件。demo

3,动画

anime.js- 是一个灵活轻便的JavaScript动画库。demo

three.js- 是一个JS 3D库。demo

vivus- JavaScript库,使SVG绘制动画。demo

4,轮播图

Swipe- 准确的触摸滑块。demo

SuperSlide jQuery图片滚动,jQuery无缝滚动。demo

5,弹出层

Popper.js- 是一个轻量级的库用于管理工具提示和弹窗效果。demo

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

artDialog- 是一个经典、优雅的网页对话框控件。demo

layer- 是一个web弹层组件。demo

6,音频视频

Loud Links- 是一个轻量级的JavaScript库用于添加交互声音到您的站点。demo

flv.js- B 站 HTML5 播放器内核开源。

7,编辑器

MediumEditor- 仿Medium.com的所见即所得在线编辑器工具栏。demo

Substance- 是一个基于Web的内容自定义编辑器。demo

flatpickr- 是一个轻量级的代码高亮库,适用于任何编程语言。demo

pen- 是一个Markdown编辑器工具。demo

aceAce(Ajax.org Cloud9 Editor)。demo

CodeMirror浏览器端的代码编辑器。demo

esprima用于综合分析的 ECMAScript 解析器。demo

quill一个带有 API 的跨浏览器富文本编辑器。(demo)

ckeditor-releases适用于每个人的 web 文本编辑器。demo

editor一个 markdown 编辑器,但仍在开发中。demo

EpicEditor一个可嵌入的 js Markdown的编辑器,拥有全屏编辑、即时预览、自动保存草稿和离线支持等功能。demo

jsoneditor查看、编辑和格式化 JSON 的 web 工具。demo

vim.js拥有持久化 ~/.vimrc 的 Vim 编辑器的 JavaScript 移植版本。demo

SquireHTML5 富文本编辑器。demo

TinyMCEJavaScript 富文本编辑器。demo

trix由 Basecamp 制作,适用于每天写作的富文本编辑器。demo

8,存储

store.js- 本地存储localstorage的封装,提供简单的API。demo

cookie.js- 对操作cookie的封装,提供简单的AIP 兼容IE6。demo

9,表单

validator.js- 轻量级的JavaScript表单验证,字符串验证。demo

List.js- 是一个轻量级的为列表、表格或其他任何HTMLL标签增加了搜索,排序,过滤器和灵活性等元素。demo

Algolia Places- 是一个能让你在网页轻易实现搜索栏自动完成功能。demo

Cleave.js- 是一个会在你输入时格式化你的标签里面的内容。demo

validator.js- 是一个简单、轻量级,但功能强大的 Validator 组件。demo

10,时间

moment- 是一个日期处理类库,用于解析、检验、操作、以及显示日期。demo

timesheet.js- 是一个时间展示片段插件。demo

date.js- 是一个格式化时间、过去时间展示、解决因时区变更插件。

timeago.js- 格式化时间显示多久以前的插件。demo

11,其它

hotkeys- 是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键。demo

clipboard.js- 现代复制到剪贴板。没有Flash,gzip压缩只有3KB 。demo

translater.js- 这是一个利用HTML注释的页面翻译解决方案。demo

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

onlinenetwork- js判断是否断网了。

iNotify- 是一个实现浏览器的 title 闪烁、滚动、声音提示、chrome、等系统通知。demo

tesseract.js- 是一个文字识别转换,可以运行在浏览器和服务器NodeJS上。demo

原文地址:2018-04-25 值得H5前端学习的60个JS插件(含DEMO演示) - 简书

  • 1
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端H5页面的适配是指将不同尺寸的设备,如手机、平板等,显示出同样的页面效果。以下是一个适配demo: 1. 使用Viewport设置页面缩放比例。 ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 2. 使用CSS媒体查询调整样式。 ```css /* 当屏幕宽度小于等于375px时,应用以下样式 */ @media screen and (max-width: 375px) { body { font-size: 14px; } .nav { display: none; } .menu-toggle { display: block; } } /* 当屏幕宽度大于375px且小于等于768px时,应用以下样式 */ @media screen and (min-width: 376px) and (max-width: 768px) { body { font-size: 16px; } .nav { display: block; } .menu-toggle { display: none; } } ``` 3. 使用REM单位相对于根元素调整布局。 ```css html { font-size: 16px; } /* 将所有尺寸单位改为REM */ h1 { font-size: 2rem; /* 相当于32px */ margin-bottom: 1rem; /* 相当于16px */ } p { font-size: 1rem; /* 相当于16px */ line-height: 1.5rem; /* 相当于24px */ } ``` 4. 使用钩子函数根据设备类型设置字体大小。 ```js if (/Android (\d+\.\d+)/.test(navigator.userAgent)) { var version = parseFloat(RegExp.$1); if (version > 2.3) { var width = window.innerWidth; var fontSize = Math.min(16, width / 360 * 20) + 'px'; document.getElementsByTagName('html')[0].style.fontSize = fontSize; } } else { // 非Android设备,根据屏幕宽度设置字体大小 var width = window.innerWidth; var fontSize = Math.min(16, width / 360 * 20) + 'px'; document.getElementsByTagName('html')[0].style.fontSize = fontSize; } ``` 通过以上方法,可以做到良好的适配效果,使得H5页面可以自适应不同尺寸的终端设备,获得更好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值