微信小程序
文章平均质量分 58
cevent
web前端:HTML/JavaScript/css/zepto/angularJS/react/vue...
java开发:
SE/EE/spring/springMVC/Mybatis/Hibernate/Maven...
服务器端:
Linux/Hadoop...
平面设计:
PS/AI
音频处理:
Audition
视频特效:
After Effects
文案处理:
word/excel/ppt
展开
-
web前端:js-DOM原生轮播图实现解构,js创建标签,js配置样式属性,稳住基础,框架顺手捏来!
1.html<标签>解析2.js页面元素获取,及初始化创建轮播圆点解析3.点击事件逻辑:切换图片及圆点样式更新4.less布局.common-title {}.common-ps {}* { margin: 0; padding: 0;}html { height: 100%; overflow: hidden; body { height: 100%; #wrap {原创 2021-02-27 00:07:57 · 276 阅读 · 0 评论 -
web前端:vue组件化开发必备,引用bootstrap,实战Todo(v-for)增删项目全文图解加源码分享
1.实现页面小组件增删(1)html配置vue组件实现的div(2)js中配置vue父组件(3)js中配置vue子组件2.less.commonTile { color: ;}.commonP { color: ;}* { margin: 0; padding: 0;}html { height: 100%; overflow: hidden; body { height: 100%;原创 2021-02-23 21:46:51 · 281 阅读 · 0 评论 -
web前端:上个月不会写这条正则,被降薪了,reg22条+扩展语法全面解析
1.正则表达式常识语法规则1.常规创建正则: var reg = new RegExp(“正则表达式”,“匹配模式”)默认正则:"/内容/" 属性为object==>检查字符串中是否含有"内容"测试方法:test() 返回一个boolean“匹配模式”i :(ignore) 忽略大小写g :全局匹配模式字面量创建正则var reg = /正则表达式/匹配模式2.本项目完成正则一览(1)判断输入内容是否包含指定的内容B(忽略大小写)//获取对象 var inp原创 2021-02-22 00:44:49 · 765 阅读 · 0 评论 -
web前端:原生js全动画企业官网,开机动画、切屏动画、分屏处理应用
1.实现效果图3D轮播图,景深效果perspective,保持preserve-3dinfinity无限动画循环,入场-出场动画移动translateoffset应用,照片4等分移动缩放canvas应用:彩色冒泡效果,opacity应用:覆盖显隐效果,文字飞入飞出2.主less布局 /*屏幕设计宽度:1200-2000,超出范围使用bootstrap自适应 * 1.主体尺寸:1100 * 520 两侧留白:50 * 2.头部header参数 * 主体内容宽度:11原创 2021-02-15 14:49:45 · 1032 阅读 · 0 评论 -
web前端:canvas动画彩色气泡,原生js类直播间点赞效果实现
1.气泡事件-随机位置/颜色梦幻全屏1.less * { margin: 0; padding: 0; } html { height: 100%; overflow: hidden; body { height: 100%; #wrap { overflow: hidden; he原创 2021-02-03 20:23:41 · 907 阅读 · 0 评论 -
web前端:原生js仿苹果mac底部流式缩放停靠栏,底层原理解析玩转不同效果
1.MAC底部栏-缩放图标效果,image-style计算原理2.less包装在这里插入代码片3.css生成* { margin: 0; padding: 0;}html { height: 100%; overflow: hidden;}html body { height: 100%;}html body #wrap { height: 600px; width: 800px; position: absolute; background: s原创 2021-02-02 22:08:41 · 631 阅读 · 0 评论 -
web前端:自定义视频播放器,原生js实现窗口自适应,视频/音量进度条应用
1.less页面包装,引用混合//导入播放器基础css@import "reset.less";//定义进度条混合.progress-bar-position() { position: relative;}.progress-bar-line() { //定位:位置不变 position: absolute; //进度条:height:3px BG:#737373 width: 100%; height: 3px; //总高25,这里是原创 2021-02-01 21:49:18 · 1597 阅读 · 0 评论 -
web前端:js原生拖拽实例,自定义拖拽控件,弹力吸附,拖拽对象覆盖后,影响其他div样式
1.less包装页面* { margin: 0; padding: 0; #wrap { height: 100%; overflow: hidden; #drag-model { position: absolute; width: 100px; height: 100px; background: steelblue;原创 2021-02-01 00:16:29 · 1006 阅读 · 0 评论 -
web前端:H5-audio原生标签,制作音阶导航
1.效果图2.less* { margin: 0; padding: 0;}html { height: 100%; overflow: hidden; body { height: 100%; #wrap { height: 100%; width: 100%; position: absolute; background: #原创 2021-01-28 22:28:08 · 350 阅读 · 0 评论 -
canvas应用:刮刮卡scratch card-手机端触摸消除效果
1.应用canvas知识点(1)drawImage(image,x,y,width,height)image:是image或者canvas对象,(x,y)为在canvas中的起始坐标width/height:图片的宽高设置(2)globalCompositeOperation:全局复合/合成操作全局透明度globalAlpha=value(0.0-1.0)默认1.0* 1.source:(源)新的图像* 2.destination:(目标)已绘制的图像|- source-over(默原创 2021-01-27 18:03:44 · 342 阅读 · 0 评论 -
web前端:canvas像素化-马赛克mosaic案例,原生js实现图片马赛克复制、覆盖
1.canvas图片马赛克原理及区间解析*每一个mosaic马赛克矩形坐标(i,j)* x=i y=j* mosaic马赛克(0,0)–>纵代表:(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4]* mosaic马赛克(1,0)–>纵向代表:(5,0) (9,4) -->随机生成像素点区间[5-9] [0-4]* mosaic马赛克(0,0原创 2021-01-26 16:29:49 · 1374 阅读 · 0 评论 -
web前端:canvas绘制画布,文本居中,获取像素点getImageData、放入像素数据putImageData,图文详解
1.canvas-font居中图解2.canvas像素计算pixel图解3.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position,会影响画原创 2021-01-26 12:14:33 · 1363 阅读 · 0 评论 -
web前端:canvas画布,飞鸟动画,原生js
1.效果图2.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position,会影响画布的坐标定位 left: 0; t原创 2021-01-25 11:42:05 · 714 阅读 · 3 评论 -
web前端:canvas画布引用,时钟表自动刷新实现,纯js原生组件
1.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position,会影响画布的坐标定位 left: 0; top: 0;原创 2021-01-24 12:34:06 · 527 阅读 · 0 评论 -
web前端:canvas画布构建旋转缩放无限循环box,原生js缩放因子实例:canvasPen-save-beiginPath-restore(clearRect、fillRect)
1.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position,会影响画布的坐标定位 left: 0; top: 0;原创 2021-01-24 10:00:24 · 341 阅读 · 0 评论 -
web前端:canvas画布应用:鼠标电子签名,原生js
1.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position,会影响画布的坐标定位 left: 0; top: 0;原创 2021-01-23 17:33:53 · 366 阅读 · 0 评论 -
web前端:企业官网响应式bootstrap一套代码跑三端,首页基本功能
1.项目需求编码工具H-Builderless预处理css工具Koala考拉响应式框架bootstrap3.0javascriptjQuery1.10及以上需求jsbootstrap.min.js、html5shiv.js、respond.min.js、jquery.min.js轮播图尺寸推荐1920px*1200px自建脚本cevent.less cevent.js2.效果图2.1PC端2.2手机、pad端2.3小功能3原创 2021-01-21 18:37:41 · 1063 阅读 · 0 评论 -
web前端:简单操作实现仿bootstrap栅格系统,纯css脚本实现
1.实现效果图2.复制bootstrap源码根目录下:bootstrap/less/ grid.less variables.less根目录下:bootstrap/less/mixins grid.less grid-framework.less clearfix.less3.修改grid-framework.less中的col- 替换为:你的任意name-4.注意clearfix{} 继承不可以在{}之前加()5.栅格系统主css实现,个人采用Koala考拉生成6.自定义cs原创 2021-01-19 16:06:51 · 304 阅读 · 0 评论 -
web前端:bootstrap栅格系统:自适应多屏幕布局,手机设备、ipad、PC三端合一
1.先看效果图2.less自定义样式*{ margin: 0; padding: 0; a{ display: block; text-align: center; color: gray; &:visited{ text-decoration: none !important; } &:focus{ text-d原创 2021-01-19 15:01:14 · 1873 阅读 · 1 评论 -
web前端:波浪舞动开机动画loading,原生css、js,@keyframes应用
1.less* { margin: 0; padding: 0; //html,body{} body { height: 100%; //高度继承 overflow: hidden; //滚动条禁止 #wrap { position: absolute; width: 600px; height: 600px; backgroun原创 2021-01-17 12:06:30 · 256 阅读 · 0 评论 -
web前端:animation动画应用,兔斯基动画实现,使用@keyframes控制起始,steps调整切换位置
1.less* { margin: 0; padding: 0; //html,body{} body { height: 100%; overflow: hidden; #wrap { position: absolute; width: 600px; height: 600px; background: url(../img/m原创 2021-01-16 19:59:23 · 409 阅读 · 0 评论 -
web前端:原生css球体弹跳效果,animation动画keyframes应用,指定停止动画animation-play-state:paused
1.less* { margin: 0; padding: 0; #wrap { position: absolute; width: 600px; height: 600px; background: url(../img/my-logo-2.png) repeat; background-size: 50px; border: 1px solid #000000; b原创 2021-01-15 22:21:52 · 354 阅读 · 0 评论 -
web前端:原生多棱柱/无限棱柱组件,js生成元素,随机生成旋转角度transform
1.less* { margin: 0; padding: 0; //注意防止页面下来 body { height: 100%; overflow: hidden; #wrap { position: absolute; width: 600px; height: 600px; background: url(../img/my-l原创 2021-01-15 17:08:29 · 238 阅读 · 0 评论 -
web前端:3D动画cubic立方体箱子,采用景深perspective,transform-style构建preserve-3d元素样式
1.less* { margin: 0; padding: 0; #wrap { position: absolute; width: 600px; height: 600px; background: navajowhite; border: 1px solid #000000; box-shadow: 2px 2px 5px #000000; border-radiu原创 2021-01-14 21:16:07 · 288 阅读 · 0 评论 -
web前端:钟表组件实现动态时间指针,原生css,js,transform-origin应用
1.less* { margin: 0; padding: 0; &:hover #wrap { background: skyblue; color: beige; } #wrap { //absolute: 元素从块级元素-》转化为定位元素,可以自定义高宽(一旦浮动,则为浮动元素) position: absolute; width: 500px; heigh原创 2021-01-13 20:17:14 · 475 阅读 · 0 评论 -
web前端:按钮转化变色,阴影box-shadow使用,动画属性transform:translate(-x,-y)居中样式
1.less* { margin: 0; padding: 0; body { a { //a标签不可以设置宽高,需要display:inline-block display: inline-block; //未知宽高下居中使用trnasform:translate(x,y) width: 100px; height: 30px;原创 2021-01-03 22:25:53 · 333 阅读 · 0 评论 -
web前端:扇形导航,三角函数sinθ对边x轴,cosθ邻边y轴计算原生实现
1.三角函数原理分析2.less定义布局* { margin: 0; padding: 0; //找子选择器css:#id > .class {} body { //取消滚动条显示 height: 100%; overflow: hidden; #sector-navigate { width: 300px; height: 300px;原创 2021-01-01 00:03:48 · 468 阅读 · 1 评论 -
Springboot单应用+mybatis-微信小程序配置详细介绍:实现服务层增删改查应用Springboot(Controller、service、dao)统一异常处理
1.创建项目2.数据库创建CREATE DATABASE wechat_demo;use wechat_demo;/*创建表*/CREATE table `wechat_area`(`area_id` INT(2) NOT NULL auto_increment COMMENT '地区ID',`area_name` VARCHAR(200) NOT NULL COMMENT '地区名',`priority` INT(2) NOT NULL DEFAULT '0' COMMENT '原创 2020-07-19 23:38:30 · 825 阅读 · 0 评论