css
关注
分享
扫一扫
吴大大逛博客
身为菜鸟~我不骄傲qaq
展开
-
vue自定义指令directive实现接口请求转圈的加载效果
封装个自定义指令v-Loading实现接口请求前，调用元素在一直转圈的效果，当然ele-UI也有类似的组件，我们是为了实现下，避免有特殊的业务要求，不多说，上代码，先看效果。vue中配合jq实现的 jq比较少 项目中要是没jq的 可以直接把用到的一行换成原生的就行。还有个转圈动画的实现，去iconfont拿一个半圆的空心圆就行，具体怎么用自定义指令~就不说了吧，各位看官自行补充知识。该条为vue版本，后面封装个原生基于jq版本的。原创 2023-02-13 14:55:59 · 1068 阅读 · 0 评论 -
vue自适应带圆圈的进度条实现#根据数量占比计算进度条长度#颜色可控
可以全局挂载–然后调用，这里的dom用了uuid当作id去渲染样式，不用担心互相影响，里面可配置。一些组件库例如ele的进度条实现只是简单的实现进度条样式，进度条的长度是百分比形式，未做到。去动态计算，这是我在这里要去实现的。原创 2022-11-15 09:53:17 · 1279 阅读 · 0 评论 -
css大背景图相对于浏览器固定，不随着放大缩小改变，不随着浏览器滚动而滚动
css大背景图相对于浏览器固定，不随着放大缩小改变，不随着浏览器滚动而滚动。原创 2022-09-15 14:12:33 · 1288 阅读 · 0 评论 -
js滚动条触底加载更多#js懒加载数据#步骤条布局懒加载
不浪费大家时间，兄弟们先看效果图，如果是你们想要的就看，不是想要的效果就去下家....这次实现的是步骤条式的懒加载效果，滚动条到底实现触发接口；说加载前先说下步骤条样式的实现思路，具体代码有点杂，有需要的可以留言dd思路div不浮动竖排排列，或者用flex布局的纵向轴，第一层的每个div上下紧靠这里不可以用magin-top和button，然后设置个border-left或者border-right样式，这时一条不间断长线就会形成，然后设置圆圈;cssless或scss。...原创 2022-07-28 10:54:06 · 1920 阅读 · 0 评论 -
element中less，scss，sass穿透设置表格table头的背景色(样式)
直接上代码上面的是在less中，需要/deep/，scss中 要用::v-deep？记住不可以使用>>>会报错！！要是不想在css中设置，或者设置不成功的，也可以在标签中去设置,这样肯定是不会影响其他的为啥想记录写这样式呢，因为element这种第三方样式库的样式，我f12去点击元素，获取class的时候，获取到了但是设置不了样式，出现的场景是设置后，刷新一瞬间设置成功了，然后立刻消失了，没定位到原因，而且这样式几年前不是这要设置的，我拿几年前的样式写法竟然也不生效？？？这不恶心人吗...原创 2022-07-06 10:01:55 · 794 阅读 · 0 评论 -
html实现dom元素的鼠标拖拽--js拖拽
ps:好久没写了—更新个小案例吧~ - ~实现一个dom元素的拖拽 主要是定位加三个dom事件：1.鼠标摁住：onmousedown2.鼠标松开：onmouseup3.鼠标移动：onmousemove先上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DIV拖拽</title></head>原创 2021-12-16 15:21:45 · 826 阅读 · 0 评论 -
瀑布流和图片的懒加载--配合节流函数--完整js代码
瀑布流在上一篇已经说了我实现的思路和方法，不懂原理的小伙伴可以去看看，当然这一篇代码是继着上一篇的瀑布流来实现的，也可以直接在这里看代码，代码中的注释都齐全。代码的实现是我手撸，但是思路是网上看各大佬的讲解来的，然后自己优化了点，加了节流和更直观的看到懒加载的情景。这里主要是为了附上完整的代码，方便各位看官能去直接ctrl+C懒加载概念：为了减少流量，提升网站性能，图片展示型网站会采用懒加载。一般第一屏的图片直接显示，从第二屏开始采用懒加载。（大概就是这个意思）实现思路① 通常的做法是在对标签.原创 2021-08-17 17:27:25 · 352 阅读 · 6 评论 -
完整瀑布流布局-手撸原生js实现瀑布流-附上完整js代码拿来即可用-列数自适应网页窗口大小-并走了节流
瀑布流什么是瀑布流：等宽不等高的样式在网页中按照一定的规则去排列实现原理：先根据窗口宽度和等宽div的大小计算出列数，然后先给第一行的div进行布局，第 一行布局完毕再去布局第二行，但是第二行的第一个元素放在哪呢？要放在第一行的最短的div下方！！css的布局走定位去实现，然后根据js的判断去设置每个div的top和left值。主要是网上的这些资料太杂了，看半天都是介绍，或者是展示个核心代码，我相信来搜这个的兄弟们肯定是想有个能直接运行的例子，所以就来个干货，代码中的onresize走了截流~原创 2021-08-17 11:37:21 · 219 阅读 · 0 评论 -
css中BFC的解释与解决方案
什么是BFC？BFC是一个概念，可能有开发经验的人遇到过场景，但是没怎么理解。概念：是个块级格式化上下文，他是指一个独立的块级渲染区域，只有块级盒子（Block-level BOX）的参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。现象一个div盒子不设置height，当内容子元素都浮动时，div盒子无法被撑起。也就是说height一直为0；这个盒子没有形成BFC；如何创建BFC？float的值不是none；position的值不是static或者relativedi原创 2021-08-13 11:55:31 · 180 阅读 · 0 评论 -
封装flex布局---及flex简易解析--最简单入门上手flex布局
flex简介布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局为“弹性布局”。任何一个容器都可以设置为flex布局，设置了flex属性的容器，其子成员元素都自动成为flex成员。容器默认存在两根原创 2021-04-21 13:46:01 · 649 阅读 · 0 评论