![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
骚操作
二十像三十
前端工程师
展开
-
js控制css变量实现操控伪元素
js控制css变量开发场景如上图,需要控制蓝色圆点的位置,因为圆点是用伪类写的,所以不好想利用ref属性操作dom那样来操作伪类,于是想到了用js操作css变量,达到同样的效果。:root { --top: -743%}.white-bar::after { position: absolute; content: ""; width: 14px; height: 14px; background-color: #409EFF; top:var(--top); //原创 2021-01-28 10:22:19 · 487 阅读 · 0 评论 -
文字在一定区域内滚动效果,h5标签属性
文字在一定区域内滚动效果,h5标签属性// 代码如下<marquee direction="up" scrollamount="3"> <p>第一行</p> <p>第二行</p> <p>第三行</p> </marquee>marquee标签,有文字在一定范围内滚动的效果,其中direction参数控制方向,scrollamount代表行数...原创 2021-01-25 14:10:42 · 218 阅读 · 0 评论 -
前端缩放拖拽方案
最近项目里有一条长长的轨道图,长度多达180W像素,而且要求能够实现横向拖拽和缩放功能。实现思路:因为是前端项目,我们把开发的着重点放在视图层,项目需要实现缩放的话,首先定义一个缩放比,根据比例来控制其长度缩放用到了zoom属性。拖拽用了html原生的属性。具体代码如下:(非vue代码,不过vue项目也可以使用这种开发思想) 感想是做这种类型的东西,能够考验对原生dom属性的了解程度,对开发思路很有帮助<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra原创 2020-11-26 20:13:28 · 1038 阅读 · 0 评论