网站首页 » 前端开发 » 移动WEB » 移动端非常实用的插件和库
上一篇:
下一篇:

移动端非常实用的插件和库

前言

本文主要分享下移动端比较常用的一些插件及库。包括 JS 库和 CSS 库。有了这些插件及库,你也可以轻松做一个移动项目,即使是我们生活中常用的 APP 中的一些效果。

JavaScript 库

有了下面这两个 JavaScript 库,就可以让你的 APP 页面有了质的飞越,效果棒棒不要不要的。

Swiper

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

这个插件可以实现一些导航滑动效果,页面切换效果,甚至是H5 的视觉差效果。具体的效果可以看这里:http://www.swiper.com.cn/demo/index.html

BetterScroll

官网地址:https://ustbhuangyi.github.io/better-scroll/#/

这个插件就比较专注了,专做滑动效果,页面以及元素的滚动(带橡皮筋效果),这种效果无处不在,几乎每个 APP 或多或少都会使用到这些效果。具体的效果及用法可以看这里:https://ustbhuangyi.github.io/better-scroll/#/examples。这个插件的所有功能 Swiper 插件插件有,至于要使用哪一个,这个得看项目需要了。

Bounce.js

官网地址:http://bouncejs.com/

这个其实也不算是插件,而是一个工具,你可以通过它来生成一些非常有动感的效果来,这个工具会生成一段 CSS 代码。所以说到底这个也算是 CSS 库中的,但 Bounce.js 这个名字,让你不得不把你放到这里来。这个用法也好简单,把生成(页面中有一个 EXPORT CSS 按钮)的样式复制到样式表中,然后在HTML 文件中添加相应的 class 类就可以了。你可以用它来生成一些动画效果(比如:Loading 动画)。

sensor.js

官网地址:http://sensor.jishub.com/

这个 js 库可以让你轻松地在浏览器上通过 H5 的 API 使用智能移动设备上的功能。js 库提供多种功能:倾斜 Orientation、摇一摇 Shake、定位 Geolocation、擦一擦 ErasableMask。具体使用手册可以参考说明:https://github.com/branding-fe/sensor

 

CSS 库

CSS 库这个就比较多了,但在这里主要是分享一些常见及实用的 CSS 库。

Waves

官网地址:http://fian.my.id/Waves/

这个 CSS 库只做一件事,点击效果。这个功能虽然小,但这个 CSS 库可以说是非常地帖心,用户每一次的点击都会以样式变化来提示用户,告诉用户你的点击我收到了。这种反馈非常的重要,当页面因为某种原因出现假死现象时用户如果点了下屏幕,如果页面没有作出反应,那么用户很有可能会一直点击。因为他不知道,它的点击页面是不是真的有在处理。下载地址:https://github.com/fians/Waves/releases

Animate.css

官网地址:https://daneden.github.io/animate.css/

这个就是纯 CSS3 动画库了,直接下载下来,在项目中引入就可以通过能元素添加类(如:animate bounce)来使用。所有效果可以看这里:https://daneden.github.io/animate.css/

有了上面这些插件及库,只要你把它们有机地配合起来,就可以做出一个非常棒的 APP 页面效果了。

iCheck

官网地址:http://icheck.fronteed.com/

html 中 checkbox、radio 元素的光影魔术手,看了你就知道。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/mobile-plugins-lib/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END