【前端】小白都能快速入门的前端插件(2020),还不快来用。

小白都能快速入门的前端插件,还不快来用。


前言: 为什么要用插件,有什么好处?

  1. 使用前端插件能够简化代码,降低维护成本;
  2. 提高效率,就那现在依旧用的人很多的jq。虽然能完成工作,但是对dom的重复调用会很消耗性能,拖延网页打开的速度。
  3. 对于程序员本身而说,可以以很简单并且很快的速度完成工作,用剩下的那点事件看会电影不行吗?

fontawesome(字体图标)

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

这个字体图标库一直在更新,而且标志可以说是比较全的,各个方面的都有,并且对于使用可以说是非常简单,可以说是一看就会

这个插件用的人应该是比较多的,就不细讲了,有兴趣的看官网。

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

字体图标


ECharts(图表)

ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。

ECharts 遵循 Apache-2.0 开源协议,免费商用。

ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。

用这款插件事件不久,感觉上手也很容易,如果想要一些复杂的效果,看一眼官网文档一定可以学会,没什么难的。

官网地址:https://www.echartsjs.com/zh/index.html
在这里插入图片描述


Bootstrap(响应式框架)

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

用Bootrap最多的地方还是响应式网页。并且插件自带字体图标,用起来还是很舒服的。

它依然很容易上手,要是自己想用Bootrap做一个独立的项目,看几天视频,或者多看下官方文档也就应该差不多了。

而且如果感觉它官方的效果不好看,自己也可以改一下插件源码,源码也是比较简单明了的,一看就知道改哪里

看我文章的各位大佬,用Bootrap肯定有比我精通的,我就不多bb了。

官网地址:https://v3.bootcss.com/css/
在这里插入图片描述


swiper(手势滑动插件)

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

官网给出的案例很全,也很详细,应该有大家要用的样子,如果缺点效果,可以看官网文档,插一条命令就ok,操作简单。

这款插件本人亲用感觉还不错,尤其做移动端页面的时候得心应手。

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

在这里插入图片描述


iconate(图片切换效果插件)

这个插件用于图标点击的动画的应用。

比如说点击某个图片出现某个图片,出现的方式是什么。

这个插件图片切换的过渡动画很平滑而且样式也很多
在这里插入图片描述
自己写动画写的过度不流畅的可以试试这款插件,绝对可以让你满意。

下载地址:https://bitshadow.github.io/iconate/

在这里插入图片描述


html5 media(操作流畅简化插件)

无需安装。
适用于所有浏览器和手机。
最快的解决方案之一。

HTML5视频和音频标签的设计使嵌入视频与嵌入图像一样容易。它们还旨在通过消除浏览器插件(如Adobe Flash)为用户提供更快的体验。

不幸的是,较旧的浏览器不支持HTML5视频和音频标签,甚至现代的浏览器也不支持一致的视频编解码器集,这使得嵌入视频变得相当困难。

html5media项目使视频或音频的嵌入变得像以前一样容易。这是一劳永逸的解决方案,不需要在服务器上安装任何文件。与许多其他HTML5视频播放器不同,它允许人们使用自己的网络浏览器提供的视频控件。它是目前可用的最小,最快的解决方案之一,并且随着浏览器技术的改进,它将变得更快。

这是个比较轻量化的插件,如果说大家实在怕影响效率(其实跟不影响一样),也可以自己写html,自己嫌手写麻烦并且为了兼容更多浏览器的可以用这款插件。

官网地址:https://html5media.info/


//上面就是我为大家分享的几款前端插件,希望对大家的工作学习有帮助,然而前端依然有很多使用有趣的插件,自己可以自行去查找。

发布了15 篇原创文章 · 获赞 35 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_45495857/article/details/104546702