博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序 悬浮按钮
阅读量:6719 次
发布时间:2019-06-25

本文共 881 字,大约阅读时间需要 2 分钟。

hot3.png

效果视频

https://pan.baidu.com/s/1yfrDaG9YAX0--v0EA3awZA

布局需要按照圆形排列,所以我们需要计算每个点的坐标

f7635b1673ae611b0766bda74e75caa6e3c.jpg

代码部分

首先fixed,绝对定位是少不掉的

css

.img{  width:80rpx;  height:80rpx;  position:absolute;}.img-before{  width:80rpx;  height:80rpx;  position:absolute;  opacity:0;}

最后是js

let that;const app = getApp();Page({  /**   * 页面的初始数据   */  data: {    showButton: false,    animationData0: {},    animationData1: {},    animationData2: {},    animationData3: {},    animationData4: {},    list: [{}, {}, {}, {}, {}],    radius: 80  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {  },  showOther: function(e) {    var that = this;    if (that.data.list.length > 5) {      return    } else {      var list = that.data.list      for (let i = 0; i 

其中,位置需要用Math.sin()/Math.cos()函数去计算,还用到了微信动画的api

ps:代码比较粗糙,只是为了做这个效果,具体优化地方根据自己的使用情况修改。

转载于:https://my.oschina.net/maxdeath/blog/2248829

你可能感兴趣的文章
并发编程笔记二:synchronized锁住了谁?
查看>>
js打字效果
查看>>
用铁路局来比喻流程管理系统,工作流引擎,表单.
查看>>
jQuery的发展史,你知道吗?
查看>>
JavaWeb:实现文件上传
查看>>
mysql: unknown variable 'character_set_client=UTF8'
查看>>
zabbix3.0监控的配置
查看>>
SSL/TLS部署最佳实践
查看>>
Screen字符桌面共享
查看>>
2015-08-22 linux命令练习3
查看>>
我的hosts文件
查看>>
Google偏爱HTTPS SSL加密链接网站
查看>>
MapReduce作业运行第三方配置文件的共享方法
查看>>
PHP 用户注册
查看>>
26_事务语法
查看>>
Linux常见命令详解1
查看>>
idea:安装配置Git和Github或码云
查看>>
获取各种编码的识别符
查看>>
搭建dnsmasq服务器,局域网内部解析
查看>>
关于 PChar 串的结束 - 给 "厨师" 的回复
查看>>