- 博客(18)
- 收藏
- 关注
RSS订阅原创 网页虚拟滚动
网页虚拟滚动效果图思路代码效果图思路类似于轮播图循环滚动，实际 加载 3 屏数据，滑动过程 动态更新数据，网页性能不受数据量影响可滚动高度为总数据的高度；监听滚动事件 动态加载 3屏数据；边界情况需要注意；代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device
2021-10-26 17:50:22
204
1
原创 使用 vue 实现 导excel 表格功能
vue 导入导出表格功能vue项目里使用导入导出表格功能 记录自己的学习效果图引入 npm 包引入两个 js 文件演示用的 vue单文件vue项目里使用导入导出表格功能 记录自己的学习演示用的页面是从网上找来的 由于个人觉得这位网友写的并不清晰 于是改写并记录使用element-ui效果图这里演示了导入表格 ，导出表格时浏览器会下载文件引入 npm 包yarn add file-saveryarn add xlsxyarn add script-loader --dev引入两个
2020-07-26 17:05:17
441
原创 卡片式轮播图 效果 实现
基于 react 实现，vue 类似效果图思路效果图中 绿色边框为 轮播图区域水平式 多张图片 水平排列 整体宽度 为 单张图片n倍 translateX 位移方式 一次整体移动一张图片宽度层叠式 动态计算 左右 每张图片 translateX 位移 、 scale 缩放 、 zIndex 层级，实现堆叠效果jsximport React, { Compon...
2019-11-20 15:58:59
9212
1
原创 canvas 写字
使用 konvas.js 完成 canvas 写字效果图思路使用Konva.js 库 详细文档Konva.jsstage 由 米字格 layer 和 字的 layer 构成整体 字 的构成 由 线段 > 笔划 > 字每个笔划 保存成 数组 历史记录使用api 有 Konva.Stage() Konva.Layer() konva.Group(...
2019-10-16 18:00:42
1282
原创 css 3d轮播图效果
在react上 实现 的 css 3d 轮播效果效果图tip效果图 正转是 点击切换 反转是模拟触摸切换思路css 用到 perspective transform-style 开启3d 效果图片 平均分布在 360度 上 （图片数量与圆的半径 需注意 出现图片重叠可调整半径）轮播切换 通过设置整体角度实现 需注意3d中心点css.carousel{ ...
2019-09-20 10:59:23
1036
原创 用react实现 冒泡排序的过程 动画 效果
冒泡排序过程动画效果bubbleSort.jsximport React, { Component } from 'react'import {Button,InputNumber} from 'antd'export default class BubbleSort extends Component { constructor(props){ su...
2019-09-11 20:22:03
733
原创 实现 react-redux 简单管理状态数据功能
学习 react-redux store 状态数据管理==实现功能====思路==context 使用react-redux 实现效果==核心功能函数 react-redux.js====测试使用==实现功能Provider connect combineReducers createStore思路createStore(reducer) 函数 提供getState() disp...
2019-09-10 22:24:10
284
原创 canvas 跟随鼠标动态彩色粒子效果
使用Konva.js 库 实现效果图思路在 2 PI 周期内 x y 分别做 一定振幅 的正弦 余弦 波形运动 坐标点的轨迹形成的就是 半径为振幅 的 圆 利用这个特性 来绘制粒子 圆周运动效果鼠标移动事件 记录 移动前后的坐标 用绘制线条来连接粒子做圆周运动的 半径就是 振幅 通过动态改变 振幅 可形成 意想不到的效果渐变的效果 需要用到 不清除画布 用rgba...
2019-08-16 16:42:30
671
原创 canvas 数字点阵时钟 彩色小球动画
原创意来自 慕课网 liuyubobobo 教程是免费的本人参考此教程 用 konva.js 库 实现 canvas 动画效果效果图思路可参考 原创意来自 慕课网 liuyubobobo 数字点阵文件 可下载教程里的 digit.js这里展示第 一种 效果 另外的现个效果 只要改变 小球 相应时段的 x y 速度 就可以实现 更多创意效果可自行实现<s...
2019-08-14 16:35:11
583
原创 使用Konva.js canvas库 实现手势密码
学习并使用 Konva.js 库效果图思路用konva.js 库 绘制 canvas界面 及手势条线鼠标滑动事件中 对比并记录 手势经过的点模拟 对比 手手势密码 重置界面js` // 手势密码 鼠标坐标 宽高var password = [] , mouse={} , width = height = 800var stage = new Konva.St...
2019-08-09 17:32:36
796
原创 用 canvas 画一个 时钟
可调整画布大小 时钟自适应 大小效果图思路1. 画 出 表盘 含外圈 中心 刻度2, 画出 时针 分针 秒针3. 每 1 秒 获取系统当前时间 重绘 整个时钟部件4. 整个时钟大小 基于 画布大小 可实现自适应详细 jswindow.onload = function(){ var myClock = new Clock ({ ...
2019-07-08 11:44:59
154
原创 用 canvs 实现 图表绘制
实现饼图 柱状图 嵌套柱状图效果图知识点canvs 文本 线 圆 弧度 矩形 绘制 填充js 部分 原型 组合 继承 实现思路MyChart 原型 用于 被继承 , 原型上有以下方法 extend 属性继承 drawGrid 绘制网格 ，drawCoordinate >>坐标系 randomColor 随机颜色 drawDescriptio...
2019-07-05 18:09:09
3536
原创 原生小程序 省市区选择页面
写一个小程序 省市区选择页面小程序里已经封装好了 region picker 这里以页面形式实现效果图 （界面部分css 未详细写 仅展示基本结构）思路1 百度获取到 全国 省市区 数据2 对省份数据 以字母形式归类 （此处用到 汉字转拼音 pinying.js , 并把 B 与A 对换位置 北京市 第一位置）3 点击相应 省市区 选择展示在 顶部位置， 点击...
2019-07-01 18:20:35
2345
原创 css flex 多宫格布局
带1px边框 的多宫格布局效果图html 结构<div class='wrapper'> <div class='item'> 1</div> ...</div>css 样式.wrapper{ display:flex; flex-wrap: wrap;}.item{ width:25%;...
2019-05-30 11:18:04
2989
原创 js 原型的一些学习笔记
记录 原型构造函数 的（prototype）原型 是 （构造函数）Object 的 实例原型是object 的实例Function.prototype instanceof Object // true构造函数的 实例 （__proto__）原型 指向 构造函数的 (prototype) 原型var fn === new Function ; fn.__proto...
2018-12-24 23:51:27
101
原创 用better-scroll 模仿 app 横向滚动 tab 导航滚动效果
记录 下 js 手写效果思路better-scroll 插件 初始化 滚动区点击事件 获取 index判断 相应 横向 x 值 预滚动 index+1 或 index -1 的 nav由于 better-scroll 的snap（配置轮播效果） 属性 没使用过 就直接手写了效果图 ( gif 压缩了与实际流畅滚动有差)html （需引入 better-sc...
2018-12-21 23:15:20
2035
原创 js 写个 星级评分 可以多个评分项 并自定义星星数
模仿网站实现的多个星级评分思路点击事件 委托父级数组分割 成多个评分项 （如最高5分 有三个评分项 就分三个数组）点击 星星 实现 该星星归属项的评分返回 评分项数组效果图 （21世纪抽象分格 7颗星 评分）html 结构 &amp;amp;lt;div class=&amp;quot;stars-wrapper&amp;quot;&amp;amp;gt; /
2018-12-17 21:37:17
1170
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人