H5新特性实战小demo
关注
分享
扫一扫
一些H5的小demo
澜漾
这个社会这么卷，怎么办？remark吧！
展开
-
下拉刷新组件（Vue版）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>下拉刷新</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <.原创 2020-06-21 22:51:25 · 971 阅读 · 0 评论 -
封装移动端面包屑（Vue版）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <s.原创 2020-06-16 15:54:54 · 1311 阅读 · 1 评论 -
手写一个带三角箭头的面包屑
面包屑代码<!-- 面包屑 --> <div class="crumbs"> <div ref="bg_triangle_first" class="bg-triangle"> <div ref="crumbs_item_first" hd="header" class="crumbs-item" @click="onToDir(formatGetCurrentPath)">{{ formatGetCurrentPath }}</d.原创 2020-05-21 11:55:19 · 449 阅读 · 0 评论 -
纯CSS3实现鼠标悬浮内容自动撑开的过渡动画
用 CSS3 实现的，由于高度的不确定，而 transtion 是需要具体的树枝，所以可以通过 max-height 这个属性间接的实现这么个效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } ul, l原创 2020-05-15 11:22:41 · 1251 阅读 · 0 评论 -
三列布局
目录介绍浮动法定位法定位法和浮动法的区别介绍三列布局指的是两边两列定宽，中间的宽度自适应，不同于圣杯布局和双飞翼，是三列布局的元素放置顺序是left,right,middle而不是middle优先加载。且middle元素的宽度也不是设置成100%，而是auto(你没设置width默认是width：auto)浮动法<!doctype html><html lang="e...原创 2020-05-07 17:30:36 · 1513 阅读 · 0 评论 -
双飞翼+伪等高
双飞翼布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2020-05-07 16:44:34 · 123 阅读 · 0 评论 -
双飞翼布局
圣杯布局圣杯+伪等高目录第一步第二步第三步第四步全部代码圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。不同之处就是在解决中间部分被挡住的问题第一步第二步接下来要将left放在middle左边，right放在middle的右边，将left，middle，设置为左浮动将right设置为又浮动第三步设置left的 margin-left: ...原创 2020-05-07 16:41:27 · 415 阅读 · 0 评论 -
圣杯布局+伪等高布局
伪等高就是不设置三块都不设置高度，内部自适应/* 伪等高 如果超出 100000px边界就失效了 */ .content .middle, .content .left, .content .right { padding-bottom: 100000px; margin-bottom: -10000...原创 2020-05-07 09:30:21 · 204 阅读 · 0 评论 -
圣杯布局
圣杯布局要实现两边固定，中间自适应，中间部分的代码要放在最上面实现优先加载第一步：创建middle，left，right，及包裹它们的父盒子content第二步接下来要将left放在middle左边，right放在middle的右边，将left，middle，设置为左浮动将right设置为又浮动由于浮动的原理是谁先浮动的谁就是在最顶端的，且middle已经设置了width为100...原创 2020-05-06 23:55:07 · 354 阅读 · 0 评论 -
鼠标悬浮菜单栏动画（vue版）
数据动态<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist...原创 2020-05-06 18:21:56 · 2002 阅读 · 0 评论 -
自己封装移动端 tarbar标签切换 带动画
大纲效果图代码效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...原创 2020-04-16 00:01:12 · 225 阅读 · 0 评论 -
H5之canvas刮刮卡
原理：利用globalCompositeOperation 抠出来那个画出来的那个图像设置为透明，然后就能看到这个画布下层的图片api: globalCompositeOperation*属性设置要在绘制新形状时应用的合成操作的类型，其中type是用于标识要使用的合成或混合模式操作的字符串ctx.globalCompositeOperation = type;type的12种类型见：ht...原创 2020-03-14 14:47:38 · 261 阅读 · 0 评论 -
H5之canvas制作图片马赛克
原理：马赛克就是于取一块像素点换成他附近大小的像素点。用到的比较少接触的api：getImageData：返回一个ImageData对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为*(sx, sy)、宽为sw、高为sh。*ImageData ctx.getImageData(sx, sy, sw, sh);sx //将要被提取的图像数据矩形区域的左上角 x ...原创 2020-03-14 12:06:47 · 313 阅读 · 0 评论