前端开发中常用的一些小型框架及插件
文章平均质量分 75
记录自己在学习前端过程中的笔记
小白小白从不日白
这个作者很懒,什么都没留下…
展开
-
图像裁剪插件--cropper的基本使用
cropperjs是一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手机端使用,支持包括IE9以上的现代浏览器。(关键是使用方法简单,几行代码就可以搞定)基本使用步骤如下:在 <head> 中导入 cropper.css 样式表 在 <body> 的结束标签之前,按顺序导入如下的 js 脚本(先是jquery.js,再是Cropper.js,最后是jquery-cropper.js) 在需要用到裁剪的主体区域中,定义如下的 HTML 结构:原创 2021-12-01 20:15:23 · 2723 阅读 · 0 评论 -
Echarts
目录1.1 什么是ECharts?1.2 ECharts基本使用1.3 ECharts标题组件1.4 ECharts工具箱组件1.5 ECharts弹窗组件1.6 ECharts饼状图1.7 ECharts航线图更详细的教程请参考官方教程:Handbook - Apache ECharts这里知识最简单的演示一下1.1 什么是ECharts?ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设..原创 2021-11-28 16:59:38 · 43388 阅读 · 2 评论 -
插件--SVG
一、初识SVG1.1 什么是SVG?SVG英文全称为Scalable Vector Graphics,意思为可缩放的矢量图位图和矢量图在计算机中有两种图形, 一种是位图, 一种是矢量图位图:传统的 jpg / png / gif图都是位图位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px位图的优点和缺点:优点: 色彩丰富逼真缺点: 放大后会失真, 体积大矢量图:矢量图是用XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的原创 2021-11-25 14:05:17 · 2801 阅读 · 0 评论 -
art-template--模板引擎
对于传统的渲染通过字符串的形式进行,但是如果UI结构比较复杂的话,则拼接字符串的时候需要格外注意引号之间的嵌套,且一旦需求发生变化,修改起来也非常麻烦,于是乎就可以用模板引擎来替代传统的方法模板引擎,顾名思义,就是可以根据程序员指定的模板结构和数据,自动生成一个完整的HTML页面官网地址:art-template模板引擎的优势:减少了字符串的拼接操作代码结构更清晰使代码更易于维护和阅读标准语法:atr-template 提供了 {{}} 这种语法格式,在 {{原创 2021-11-23 20:48:34 · 519 阅读 · 0 评论 -
canvas--初识canvs、绘制:线型、简单图形、渐变背景颜色、绘制动画、canvs形变、事件绑定
目录一、初识canvas1.1 基本使用1.2 示例1.1 注意点二、canvas线条相关属性2.1 常用属性2.2 示例2.3 绘制多根线条c.示例:三、canvas绘制简单图形3.1 绘制三角形3.2 路径绘制3.3 矩形绘制3.4 绘制虚线3.5 绘制表格3.6 绘制坐标系3.7 绘制数据点3.8 绘制折线图3.9 绘制柱状图四、渐变背景颜色4.1 设置图形渐变背景颜色步骤4.2 绘制圆弧4.3 绘制饼状...原创 2021-07-16 09:51:09 · 4205 阅读 · 0 评论 -
动画插件--scrollReveal
1.什么是scrollReveal? scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;2.scrollReveal特点同时兼容PC端和移动端不依赖于jQuery以及animate.css定制性高,使用简单方便快捷和animte.css, WoW一样, 不支持低版本浏览器(IE10+)3.使用步骤引入框架 搭建结构体 创建ScrollRev..原创 2021-11-21 15:49:40 · 783 阅读 · 0 评论 -
动画插件--WOWJS
一、 WOW.js的基本使用1.1 什么是WOW.js?WOW.js是对animate.css的扩充, 让页面滚动更有趣通过WOW.js,可以在页面滚动的过程中逐渐释放动画效果简单点理解: (wow.js + animate.css) 约等于 (swiper.js + swiper.animate.css)只不过swiper更加强大, 企业中使用频率更高, 所以重点掌握swiper1.2 wow.js使用引入animate.css 引入wow.js 给需要执行动画的元素.原创 2021-11-21 15:36:20 · 1188 阅读 · 1 评论 -
动画插件--AnimateCSS
1.什么是Animate.css?其实swiper-animate就是参考Animate.css演变出来的一个插件, Animate.css和swiper-animate一样都是用于快速添加动画的, 所以会用swiper-animate就会用Animate.css2.Animate.css的使用:引入animate.css的文件 给需要执行动画的元素添加类名3.示例animated这个类名是animated.css的基类, 但凡需要通过animated.css来添加动画, 都需原创 2021-11-21 15:08:52 · 1536 阅读 · 0 评论 -
Swiper
一、swiper基本使用1.1 什么是swiper?Swiper是纯javascript打造的滑动特效插件,面向PC、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!这里以 swiper7为例 1.2 如何使用swiper?引入swiper对应的css和js文件(swiper-bundle.min.js和swiper-bundle.min.css文件,...原创 2021-11-20 15:02:56 · 6294 阅读 · 0 评论 -
iScroll
一、iScroll基本使用1.1 什么是iScroll?iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。 iScroll不仅仅是滚动。在你的项目中包含仅仅4kb大小的iScroll,能让你的项目便拥有滚动,缩放,平移,无限滚动,视差滚动,旋转功能1.2 iScroll基本使用按照iScroll的规定搭建HTML结构引入iScroll创建iScroll对象, 告诉它谁需要滚动1.3 iScroll的版本针对iScroll..原创 2021-11-19 20:40:48 · 2986 阅读 · 0 评论 -
Zepto
一、Zepto初体验1.1 什么是Zepto?Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库,它与jQuery有着类似的api, 如果你会用jQuery,那么你也会用Zepto1.2 .既然和jQuery差不多, 为什么还需要Zepto?jQuery更多是在PC端被应用,Zepto更多是在移动端被应用也正是因为jQuery用在PC端, 所以jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大也正是因为Zepto用在移动端, 所以原创 2021-11-16 17:03:13 · 4075 阅读 · 0 评论