![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 65
七月末丷
一只快乐的小前端
展开
-
Vue跑马灯marquee组件(双端通用)
目录一、实现效果二、实现过程三、js版本源码四、Vue组件源码一、实现效果二、实现过程 前言:最开始用间隔器方案制作了一个跑马灯,但是放在移动端中会出现严重的掉帧卡顿现象,于是整理思路后采用transition方案制作一个从右到左的动画处理问题 思路整理: 1.过渡是需要设定时间的,但是跑马灯中的文本可能是长短不一的 解决方案:根据文本的总宽度(即文本总长)设定过渡时间,假设文本宽度500px,我们将其除以...原创 2021-06-24 10:39:13 · 2670 阅读 · 0 评论 -
原生JS实现跑马灯marquee
一、实现效果原创 2021-06-01 16:27:17 · 723 阅读 · 0 评论 -
原生JS实现黑猩猩测试
零、体验游戏http://aring.3vfree.net/game/Chimpanzee-Test/index.html一、实现效果二、实现过程看上图实现效果,大致的思路梳理:1.设定一个表格,初始隐藏所有单元格2.随机给单元格赋值以及添加边框3.根据游戏难度等级循环赋值单元格4.赋值完毕后为单元格添加点击事件以判断点击结果5.判定尝试次数以及继续游戏/重新游戏功能梳理好思路开始写脚本:第一步实现让单元格随机显示在表格中,如下图首先,..原创 2021-05-14 17:31:25 · 638 阅读 · 1 评论 -
JS+Position实现类接元宝游戏
一、实现效果二、实现过程先看一眼HTML结构<div class="top-bar"><span>得分:</span><span id="score">0</span></div><div class="container"> <div class="gem-container"> <div class="gem" id="gem0">原创 2021-04-22 15:18:47 · 1200 阅读 · 3 评论