布局/ui/CSS
文章平均质量分 51
flex、css、element
毛发苍苍
尽量只更新一些比较花调研时间的东西。具体技术就算啦
展开
-
高性能动画JSON动画
animejs它是一个js动画库,是对transform进行封装,使其受js控制、拥有更高性能和很好的兼容。最重要的是:提供了很多回调、监听方法。eg:每帧回调、每次循环回调、循环开始的回调。提供了一个时间轴概念,赋予其属性继承和控制动画执行顺序的能力。https://www.animejs.cn/documentation/#cssSelectorlottie - web以往实现动画方式有三种(不谈游戏):keyframe、transform、gif。痛点是我们很难实现复杂动画,而js原创 2022-04-26 15:13:02 · 3771 阅读 · 0 评论 -
【小程序】自定义顶部导航栏(左上角返回等)
思路:明白一点,右上角的胶囊按钮是隐藏不了的,是固定在右上角的,也意味着自定义导航栏时候不用考虑它先在需要自定义导航栏的A页面,配置"navigationStyle":“custom”【全屏】,和window属性同级编写一个普通组件做为导航栏,高度X,甚至可以写一个搜索框在上面的。A页面引入该组件,写好位置(在最顶部),对准胶囊按钮的位置【最重要一步】计算高度X实现:【navbar.html】我这个左上角是一个icon,跳往主页<view class='nav' style='he原创 2021-10-14 23:35:06 · 4552 阅读 · 0 评论 -
前端视觉优化(四)css动画,animation属性
实战展示让这个手指一直在 \ 这个对角线上移动。匀速、一次完整周期1.5s .guide { position: absolute; height: 3.16rem; width: 3.16rem; bottom: -1.5rem; right: -1.5rem; animation: slip 1.5s infinite ease-in-out; //核心代码。 } @key原创 2021-07-13 10:32:32 · 276 阅读 · 0 评论 -
H5——监听页面图片加载完后,放开loading页面
思路:给那些图片设置data-src=‘图片地址’属性 代替 src。然后写个公共文件处理逻辑:获取img标签的dom,把data-src的值赋给src,用onload方法判断图片加载完没。当所有图片都onload了。就可以放开loading了。<template> <div> 页面样式自己写, <slot></slot> //记得带这个 </div></template><script>e原创 2021-05-27 11:59:04 · 1130 阅读 · 0 评论 -
css——给多张图片设置一个背景图:上下固定尺寸+中间拉伸,里面放内容
UI图:头尾是特殊的边框。中间也有边框无限拉升,里面要放图片原创 2021-04-28 16:14:59 · 2535 阅读 · 0 评论 -
H5——移动端JQ实现下拉刷新、上拉加载更多
前言这里用的JQ库里免费插件__dropload,效果图在文末引入去上面链接里面下载内容,可以本地引入<link rel="stylesheet" href="../dist/dropload.css"><script src="../dist/dropload.min.js"></script>最好就放在自己cdn服务器上引入代码html这边就,<div class="main" //插件绑定这层 <div class="原创 2021-04-11 15:54:02 · 1622 阅读 · 3 评论 -
H5——必备之使用swiper.js、常规且带点好看配置
这是H5项目用的最多的了,最近重新用上有些忘记,还是写出来方便查看基本的,也帮助其他人HTML部分这是pug的语法,不写标签名默认即div了,也很好看懂,主要是看层级关系。需要分页器,就要写上一个<div class=".swiper-pagination ">即可 上下页同理。 .swiper-container //最外层 .swiper-wrapper //主要显示层 .swiper-slide /原创 2021-03-28 22:42:44 · 718 阅读 · 0 评论 -
H5——(JQ/原生实现)页面上传图片
关于原生的东西,起码我多少是忘了许多,记录一下。这也是H5比较常用功能了。需求/问题:点击button,选择图片、校验、上传废话不多说,直接上代码吧<!DOCTYPE html><html><head></head><body ><button id="subimg" onclick="ome()">来了老弟</button><input type="file" multiple id='getfi原创 2021-03-08 18:30:48 · 1462 阅读 · 2 评论 -
H5视觉优化2.1(JQanimate动画),点赞弹起消失
先看看万恶的产品原型图先看animate的参数:$(selector).animate(styles,speed,easing,callback)styles:必需参数,需要产生动画的css样式(使用驼峰式命名,即:marginLeft)speed: 规定动画的速度easing:动画速度(swing先慢后快,linear匀速)callback:函数执行完之后的回调函数实现思路:1.写两个点赞的html和样式,一个隐藏2.点击时,一个取消隐藏,另一个设置absolute定位,top起来并原创 2021-02-07 22:20:04 · 226 阅读 · 0 评论 -
vue自定义table表头个数,拖拽调整表头顺序draggable
先上效果图先说下难点在哪不知道用什么插件,显示css层面样式列表是一个JSonelement多选框绑定值只能是普通数组(可以绑定对象,但是无法回显)拖拽后如何影响到多选框绑定值的数据的顺序的思路先准备好一个全量的JSon列表数据alldataeg:[ {label:‘学员姓名’,val:‘studentname’}…]在准备一个默认显示表头的JSon数据nowdata(即目前展示的表头)把这两传给子弹窗,子弹窗监听目前展示的表头nowdata,利用map()转普通数组arry原创 2021-01-22 12:03:20 · 1516 阅读 · 0 评论 -
vue2-editor富文本,图片上传url、工具栏详解
1.引入npm install vue2-editor --save // 安装import { VueEditor } from “vue2-editor”;components: { VueEditor }, //注册组件<vue-editor v-model="content"></vue-editor>2.覆盖上传方法多加中间这两行配置<vue-editor useCustomImageHandler@image-added="han原创 2020-12-27 15:11:47 · 2252 阅读 · 10 评论 -
前端视觉优化(三)css动画过渡,transition过渡属性
视频主总结的太好了。直接截图了四要素介绍过渡属性啥是过渡属性,color:xxxx,font-size:xxx,transform:xxxxcolor,font-size,transform就是你要过渡的属性,你指定他们,过渡时候他们就遵循你的规则过渡时间可以设置秒s,或者毫秒ms过渡函数可能会有兼容问题,注意下浏览器前缀的使用ease:默认,慢-快-慢的过渡效果liner:匀速ease-in:加速ease-out:减速ease-in-out:慢-加速-减速-慢。和ease差不原创 2020-12-23 19:12:11 · 350 阅读 · 0 评论 -
前端视觉优化(二)css动画,transform属性
视觉优化一:阴影篇transform(2D转换)以前图片转换都依赖js,现在css3可以做到倾斜,旋转,缩放css3的transform是用函数来定义的translate(x,y)沿着xy轴移动,以前可以通过margin来动,现在先进一点,向右移动30px:transform:translate(30px);一般用于,指向时配合阴影模拟浮起。代码不难rotate(20deg)旋转20°。没什么好讲的。都是顺时针使用场景比较少吧。。。scale(x,y),xy轴分别缩放一个参原创 2020-12-22 23:04:38 · 317 阅读 · 0 评论 -
浏览器前缀(css属性兼容文件)
有一些css属性是还没有全面支持,各个浏览器内核各做各的,所以想要兼容各个浏览器,就需要给这些属性加一个前缀,表明兼容火狐/谷歌/IE/欧朋内核假如ababa属性,-moz-ababa:18px; //在火狐中肯定能用-webkit-ababa:18px; //谷歌肯定能用-ms-ababa:18px; //IE-o-ababa:18px; //欧朋ababa:18px; //记得最后补一句这个,万一以后支持了呢值得一提的是,safari浏览器、360急速、猎豹、世界之窗都是用的谷原创 2020-12-22 11:11:33 · 302 阅读 · 0 评论 -
vue虚拟dom,Render、h函数的运用
大部分情况目的:有些地方你没法写html,你就需要在js中函数给他返回一个htmltip:要讲的就是代码里的h();至于什么是虚拟dom,是面试必懂的东西,这里不赘述了用法:createElement()方法,别名是h(),它有三个参数,前2必选,栗子:h(“p”, { style: “color:red” }, “是否让这个预约定金活动立刻结束?”)参数一:接受一个字符串、对象、组件字符串时候就是标签名,就是‘div’标签参数二:接收对象、或者数组接收数组是设置子组件的。比如div里面原创 2020-12-14 16:56:17 · 674 阅读 · 1 评论 -
前端使用html2canvas,生成海报并下载图片
html2canvas插件官网有点铁打弊端,只能截图可视的部分,你可以缩小截图官网的实例,截图后再全屏浏览器,你会发现也是只截了一部分。然后网上各种方法,什么滚动回到顶,复制节点,scale。。。。我是看了很多连续花了五个小时没实现。所以最后方案是:小图在pc端可以搞。大图(大于可视窗口)不行,得让后端合成(后端难点在于文字合成)小程序无视第一条,可以前端搞,但是难度高得多小图pc端用html2canvas截图,有一定兼容问题,用插件就有问题使用: html2canvas(documen原创 2020-12-03 14:55:56 · 992 阅读 · 0 评论 -
vue-cli3和4 引入scss,scss常用语法
搜了好多。基本没用的。记录下一个有用的装载的用这个scss,主要还是用他的嵌套语法。还有下面这几个语法。就没什么特别的了。规范层面的意义更多吧。补充~所谓的嵌套写法,对应html的嵌套 .s2 { font-size: 20px; .s3 { color:red } }...原创 2020-12-01 19:15:56 · 267 阅读 · 0 评论 -
src图片使用base64格式,免请求/上传使用图片
效果图代码(红色区域就是超长的base64编码)这种方法仅仅限于 图片超小情况使用图片转base64地址原创 2020-11-11 16:49:39 · 525 阅读 · 0 评论 -
element-图片文件上传,多图合并请求(各种踩坑)
先上图1 .认识属性:file-list=“fileList”上传的话选中文件后,会加载到页面中供我们预览。这个属性就是存预览的照片数组的。(你不配置这属性,当然也能看到预览,但是你无法对其进行操作,比如删除)2.:auto-upload=“false” 选中文件后是否直接上传。记住这个很重要,文档几乎不提3.:on-change 官方解释“文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用”,当你添加文件也会调用,使用这个的时候,记得把第二点属性设置成fa原创 2020-10-16 17:20:30 · 950 阅读 · 0 评论 -
图片自适应等比宽高,防加载过程闪烁
有个痛点:轮播图加载过程中,他的高度是慢慢增加的。慢的时候会看到其他元素错位,快的时候会有闪烁感觉。怎么办?首先写死高度是不实际的,肯定要宽度拉满的,那么高度是要根据图片比例来设置。我们可以用padding-bottom来解决。<a> <b> <img src=""> </b></a>我们给b元素设置下面的样式,66.66%=高/宽。可以理解为初始高度为0,高度慢慢填满直至达到比例。width:100%;height:原创 2020-07-08 14:38:28 · 366 阅读 · 0 评论 -
地址栏 / js 获取鼠标位置,实现图片域
先上代码和效果图<a href="#"> <img src="~assets/img/index/map2.png" usemap="#map" ismap="ismap" @touchstart="move" class="photo1" @touchmove="move2" ></a> 点击图片后,地址栏出现坐标img标签使用usemap ,ismap属性用<a 标签> 套住标签想要通过js获取数值原创 2020-07-03 15:37:42 · 251 阅读 · 0 评论 -
前端视觉优化(一)CSS边框阴影、四周阴影讲解
先上一个代码通俗讲解吧,分5个参数1.控制水平位置阴影,+为右边,0为中间(即两边都有)2.控制垂直方向阴影,+为下边,0为中间(即两边都有)3.模糊处的宽度4.阴影尺寸 (3和4实际效果比较难区分,自己调一下即可)5.阴影颜色···其实有6个参数,以下是官方文档h-shadow 必需。水平阴影的位置。允许负值。 测试v-shadow 必需。垂直阴影的位置。...原创 2020-02-17 20:20:34 · 23536 阅读 · 1 评论 -
vue实现多文字展开收起(含多条数据分别展开收起)
vue实现多文字展开、收起<span v-if="topgame.gameintr.length > 212" class="intr"> <span v-if="!iskai">{{ topgame.gameintr|open}}</span> <span v-else="!...原创 2020-01-14 16:14:53 · 3730 阅读 · 9 评论