使用4张wifi图片制作出wifi信号扩充的动态效果

原理

将4张图片按顺序延时播放，这样就可以做出wifi信号扩充的效果了，就像小喇叭动态播放声音一样

原图

过程

1、放一个img标签，放图片

<img class="wordLook" :src="imgWifi" width="17%" @click="wifiBrightClick()" />

2、图片默认放一张图片

imgWifi: require("../../../public/all/wifi0.png")    //图片路径

3、在点击图片后触发切换图片

      wifiBrightClick(){var countWifi=0;this.intervalIdWifi = setInterval(() => {if (countWifi == 0) {this.imgWifi = require("../../../public/all/wifi1.png");}if (countWifi == 1) {this.imgWifi = require("../../../public/all/wifi2.png");}if (countWifi == 2) {this.imgWifi = require("../../../public/all/wifi3.png");}if (countWifi == 3) {this.imgWifi = require("../../../public/all/wifi0.png");}if (countWifi >= 4) {clearInterval(this.intervalIdWifi); //清除计时器this.intervalIdWifi = null; //设置为null}countWifi++;}, 800);}

Vue用图片制作Wifi动态图制作小喇叭效果相关推荐

layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
android动态图制作,Android 教程：如何在手机上制作高质量的 GIF 图片
相比于静态图片的一动不动,GIF 图片显得十分生动活泼,并且能表现一定的情节.虽然已经有 GIF 快手.美图 GIF 这类易用的 GIF 制作应用,但其有着诸多的限制,像时长.分辨率等都不可自行调节. ...
Excel动态图制作
1.柱形图+折线图 2.对比图:柱形图 3.柱形图改变 4.仪表盘:圆环图+圆形图 5.漏斗图:条形图
怎樣制作线段动画_线条动画视频制作如何制作线条运动图？线条动态图制作...
上周广东终于成功入秋,但是为什么,此刻小编感觉到很热嘞~广东这个天气真的是一年四季随机循环的啊~哈哈.好啦,不说废话,来看看今天的教程方案吧!线条动画大家知道是什么意思嘛?就是画面中有线条在运动的动画 ...
怎么用多张图片制作动态图？
怎么用多张图片制作动态图?昨天公司的同事向我请教一个问题,因为某项工作的原因,现在主要将多张图片制作成一个动态图片,他在网上寻找了一些方法教程,大多是采用ps软件来进行完成,但是由于他以前从未使用过p ...
stata生成脉冲响应图怎么导出_GIF 动态图：我用 Stata 来制作！
连享会最新专题直播连享会-知乎推文列表 Note: 助教招聘信息请进入「课程主页」查看. 因果推断-内生性专题 ⌚ 2020.11.12-15 主讲:王存同 (中央财经大学):司继春( ...
超详细的Python matplotlib 绘制动态图
复习回顾在matplotlib模块中我们前面学习绘制如折线.柱状.散点.直方图等静态图形.我们都知道在matplotlib模块主要有三层脚本层为用户提供快捷的绘制图形方法,美工层接收到脚本层的命令后 ...
vue antvG6 多功能tree图树图树结构
vue antvG6 多功能tree图树图树结构效果展示代码环境 tree图页代码效果展示 antvg6 树结构效果图 antvg6 tree图搜索节点 antvg6 tree图显示时间,状态 ...
如何把mp4视频转换成gif动态图
提到gif动态图想必大多数小伙伴即便是不熟悉也肯定也不会陌生的.近几年来随着"表情包"的流行和井喷式的发展使表情包成为了新兴的网络语言.而gif动态图由于表达效果更加强烈且表达效果 ...

Vue用图片制作Wifi动态图制作小喇叭效果

原理

原图

过程

1、放一个img标签，放图片

2、图片默认放一张图片

3、在点击图片后触发切换图片

Vue用图片制作Wifi动态图制作小喇叭效果相关推荐

最新文章

热门文章

Vue用图片制作Wifi动态图 制作小喇叭效果

原理

原图

过程

1、放一个img标签，放图片

2、图片默认放一张图片

3、在点击图片后触发切换图片

Vue用图片制作Wifi动态图 制作小喇叭效果相关推荐

最新文章

热门文章

Vue用图片制作Wifi动态图制作小喇叭效果

Vue用图片制作Wifi动态图制作小喇叭效果相关推荐