封装vue版数字翻牌器
封装vue版数字翻牌器
<template> <div class="number"> <ul id="dataNums"> <li v-for="(item,index) in list" :key="index"> <div class="dataBoc"> <div class="tt" :style="{transition:'all 2.5s ease-in-out 0s',top:'-'+item.top+'px'}"> <span v-for="(item2,index2) in numList" :key="index2">{{item2}} </span> </div> </div> </li> </ul> </div>
</template>
js部分
export default { props:{ number:Number }, data(){ return{ list:[], numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.'] } }, mounted(){ this.scroll(); }, methods:{ scroll(){ this.list=this.number.toString().split(''); let arr=[]; this.list.forEach((value) => { arr.push({ num:value, top:0 }) }); this.list=arr; let Hei=parseFloat(getComputedStyle(document.getElementById("dataNums")).height); this.list.forEach((value,index) => { setTimeout(()=>{ value.top=parseFloat((value.num*Hei)+(Hei*10)); },index*300); }); } }
}
css样式
.number { margin-bottom: 10px; text-align: center; ul { display: inline-block; height: 40px; text-align: center; li { float: left; width: 40px; height: 40px; text-align: center; margin: 0 4px; background: url("../assets/images/yuyueshf/number.png") no-repeat center;//背景图 background-size: 100% 100%; .dataBoc { position: relative; width: 100%; height: 100%; overflow: hidden; .tt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; span{ width: 100%; height: 100%; line-height: 40px; float: left; text-align: center; font-size: 26px; color: #f64841; } } } } }
}
封装vue版数字翻牌器相关推荐
- Vue实现数字翻牌器效果
<template><div><div class="head" @click="this.numFun(0,5000)"> ...
- vue实现数字翻牌器组建,能够正常显示负数符号
先看一下效果图: 代码如下: 首先建立countFlop.vue文件,作为组建. <template><div class="count-flop" :key=& ...
- Vue大屏实战一:数字翻牌器的实现
文章目录 1.效果预览 2.数字翻牌器的实现 3.vue项目中引入DataV 4.大屏顶部翻牌器布局 5.大屏数字翻牌器样式 6.大屏数字翻牌器逻辑实现 1.效果预览 页面整体效果如下 顶部的数字翻牌 ...
- 封装一个layui组件---js实现数字翻牌器效果
封装一个layui组件-js实现数字翻牌器效果 layui.define(["jquery"], function (exports) {var $ = layui.jquery; ...
- 大数据可视化——dataV,Echarts,蚂蚁金服L7世界地图引入,数字翻牌器,全屏,自定义排名轮播表
目录 L7相关概念 构造函数Scene PointLayer 基本用法 shape 类型 style tips 地图事件 Popup信息框 option 方法:setLnglat 方法:setDOMC ...
- 基于vue3 + ts 开发的数字翻牌器组件
写了两个组件,一个是DigitalFlop.vue,一个是DigitalItem.vue DigitalFlop.vue 的代码如下: <template><div class=&q ...
- DataV 数字翻牌器组件 dv-digital-flop 数字0不显示问题解决
问题: 在项目上线时我们会为了减少项目体积选择使用cdn链接将项目中用到的组件插件从打包的结构中剔除,在最近的项目中发现 DataV组件库 出现了问题,使用cdn链接时出现,数字翻牌器组件当confi ...
- 【前端3分钟】写一个数字翻牌器
在做效果的时候,想要表现一个数字数据的动态变化,例如金额增加,此时我们就可以使用数字翻牌器来表现.当然,你也可以使用其他效果来表现. 下面我们就来实现,注意一点: 数字的增加 <!DOCTYPE ...
- 大屏可视化数据面板分格渐变进度条、数字翻牌器及其刷新动效实现
数据可视化大屏是当前可视化领域的一项热门应用,通常可以分为信息展示类.数据分析类及监控预警类.这类应用的视觉设计通常效果炫酷,动效丰富,有时候一些页面布局和动画实现会对前端人员有一定的挑战性,在这里分 ...
最新文章
- arnold如何设置鱼眼相机_华为相机实用技巧——如何调整相机设置?(2)
- [BZOJ4557][JLOI2016]侦查守卫
- python中怎么安装pip-python中怎么安装pip
- Keras Theano 输出中间层结果
- 007_JMS中的持久订阅
- 使用 FocusScopeNode 在 TextFormFields 之间轻松移动焦点
- python 跳一跳辅助_python实现跳一跳辅助的实验报告
- struts-config.xml 中 action 与 forward 的重要属性
- js倒计时,距离某个时间的倒计时。
- 抗腹泻药行业调研报告 - 市场现状分析与发展前景预测
- 求最长XX序列的两种方法
- snownlp 原理_snownlp入门
- java 获取vm配置参数_如何获取Java中的Java VM规范?
- YUV420->RGB888格式转换的CPP实现
- 解决——虚拟机无法Ping通主机
- html、css 实现网页弹出层
- 什么可以有助睡眠,助睡眠的生活好品
- wex5 导入mysql_Wex5铛铛开发环境搭建步骤
- java listener 模式_Java和GUI-根据MVC模式,ActionListener属于哪里?
- Visual Studio Code编写html代码实现立方体相册,表白相册