html5仿蚂蚁森林效果代码,vue仿支付宝蚂蚁森林水滴
APP 需要做一个类似蚂蚁森林的功能模块,动效和蚂蚁森林接近,可以有多个水滴,可以控制位置,水滴上下浮动。
gif图如下所示:
soogif.gif
v-for="(item, index) in ballList"
:key="index"
class="ball_small"
:style="{
top: all_y[index] + 'px',
left: all_x[index] + 'px',
transition: 'all 2s',
backgroundImage:
'url(' + sbg[Math.round(Math.random() * (2 - 0) + 0)].url + ')',
backgroundSize: '100% 100%'
}"
>
1000
data() {
return {
ballList: [0,1,2,3,4,5,6,7,8,9,10],//后台返回的小球信息
sbg: [
{
url: require("@images/index/bor.png")
},
{
url: require("@images/index/bor2.png")
},
{
url: require("@images/index/bor3.png")
}
],//小球背景图
xStart: 0,
yStart: 0,
jsonArr: [],
all_x: [],
all_y: [],
};
},
mounted() {
this.getQiu(this.ballList.length);//小球个数
for (let i = 0; i < this.jsonArr.length; i++) {
this.all_x.push(this.jsonArr[i].xStart);
this.all_y.push(this.jsonArr[i].yStart);
}
},
getQiu(number) {
let iconWidth = 60; //值越大,元素左右间隔越大
let iconHeight = 60; //值越大,元素上下间隔越大
let targetHeight = this.$refs.userinfo.offsetHeight;
let targetWidth = this.$refs.userinfo.offsetWidth;
let _tmpArray = [];
let num = number;
if (targetWidth < iconWidth || targetHeight < iconHeight) {
return false;
}
var xNum = parseInt(targetWidth / iconWidth, 10); //用浏览器的宽度除以一个元素的宽度可算出浏览器窗口内一行可以放置元素的个数
var yNum = parseInt(targetHeight / iconHeight, 10); //用浏览器的高度除以一个元素的高度可算出浏览器窗口内一列可以放置元素的个数
var allNum = xNum * yNum; //浏览器窗口内总共可以放置元素的个数
console.log(allNum);
//当需要放置的元素的个数超过浏览器窗口内总共可以放置的元素的个数时,则返回
if (num >= allNum) {
return false;
}
for (var i = 0; i < allNum; i++) {
_tmpArray.push(i);
}
while (num) {
var pointer = Math.floor(Math.random() * allNum); //向下取整取出0到allnum之间的任意一个整数
if (!_tmpArray[pointer]) {
continue;
}
delete _tmpArray[pointer]; //删除数组_tmpArray中第pointer个值
this.yStart = parseInt(pointer / xNum, 10) * iconWidth;
this.xStart = (pointer % xNum) * iconHeight;
this.jsonArr.push({
xStart: this.xStart,
yStart: this.yStart
});
num--;
}
}
html5仿蚂蚁森林效果代码,vue仿支付宝蚂蚁森林水滴相关推荐
- android 仿ios动画效果代码,Android仿IOS上拉下拉弹性效果的实例代码
用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果,使用起来用户体验很好:Android并没有给我们封装这样一个效果,我们来看下在Android里如何实现这个效果.先看效果,感觉有些时候还 ...
- html5 css3实现幻灯片效果代码,CSS3实现的渐变幻灯片效果
实现效果 代码 html CSS3: CSS3 delivers a wide range of stylization and effects, enhancing the web app with ...
- HTML5电子书翻页效果 代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文
介绍 源码名称:[HTML5电子书翻页效果]代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文 源码大小:237KB 开发语言:PHP+Mysql 操作系统:Windows,Linux 源码 ...
- html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
- 蚂蚁森林用户须知_对于支付宝蚂蚁森林树苗已领完是否存在欺骗消费者的现象?...
1.据观察,蚂蚁森林一批树苗被领完后,慢慢会准备另一批新树苗,大概每一批树苗要等与公益组织协商安排妥当后才上线.不妨静候,看是否有树苗更新. 2.如果经过合理期间,还不见树苗,想要起诉蚂蚁森林,建议仔 ...
- html5图灵机器人自动会话代码,Vue结合图灵机器人制作的一个简单的仿微信聊天的自动回复机器人...
HTML5模拟微信聊天界面 /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑' } #cont ...
- android tab 悬停效果代码,Android 仿腾讯应用宝 之 Toolbar +Scroolview +tab滑动悬停效果...
Android 仿腾讯应用宝 之 Toolbar +Scroolview +tab滑动悬停效果 来源:互联网 作者:佚名 时间:2015-02-10 15:36 Android 仿腾讯应用宝 之 To ...
- html仿京东选项卡切换代码,js仿京东轮播效果 选项卡套选项卡使用
本文实例为大家分享了js仿京东轮播效果的具体代码,实现选项卡套用选项卡,供大家参考,具体内容如下 效果图: 代码: 无标题文档 *{margin:0;padding:0;} ul{list-style ...
- android仿抽屉动画效果,Android之仿哔哩哔哩客户端首页+抽屉式导航
本文使用Toobar+DrawerLayout+NavigationView仿哔哩哔哩客户端首页+抽屉式导航,同时实现了沉浸式状态栏的效果. 一.效果图 图片及图标色彩等没有刻意模仿,结构相同. 上图 ...
最新文章
- openssl——初了解
- CentOS 8 即将停更,未来我们该何去何从?
- 超图三维GIS开发概念学习
- Scikit-Learn 机器学习笔记 -- 决策树
- POJ-2186 Popular Cows (Tarjan缩点) 文末有测试数据
- 腾讯在信息流内容理解技术上的解决方案
- 全国计算机等级考试题库二级C操作题100套(第88套)
- runloop - 面试题
- SCVMM2012 SP1 之虚拟机克隆
- jquery数组怎么传给后台_我是如何让公司后台管理系统焕然一新的(下)封装组件...
- kubernetes(k8s)-介绍2
- ZooKeeper使用get命令无法获取节点版本信息
- 三星电子首次公布李在镕薪酬 看起来一点儿也不高
- HDU2098 分拆素数和【筛选法】
- 【Python】从0到1:30行代码制作表白窗口!(可直接copy + 运行哦~)
- ABAP Debug 调试功能
- ReactNative视频播放器
- 基于卡尔曼滤波器的回声消除算法
- 大鱼吃小鱼小游戏(Java版代码,JavaSwing+多线程+接口)
- 职场中职员如何向上管理?