微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
正文：
html
view class='aa' image animation="{{animationData0}}" class='img0' style='z-index: {{index_0}};' bindtap='bindtap_img' id='0' src="{{clubs[0].image}}"/image image animation="{{animationData1}}" class='img1' style='z-index: {{index_1}};' bindtap='bindtap_img' id='1' src="{{clubs[1].image}}"/image image animation="{{animationData2}}" class='img2' style='z-index: {{index_2}};' bindtap='bindtap_img' id='2' src="{{clubs[2].image}}"/image/viewview class='is_height_1' id="is_height_1" style='height:120rpx;width:300rpx;'/viewview id="is_height_2" style='height:380rpx;width:200rpx;'/viewcss
page{ background: #3B4595}.aa{ position: relative; margin-top: 50rpx;}.img0{ border-radius: 5rpx; position: absolute; left:180rpx; width: 375rpx; height: 230rpx; }.img1{ border-radius: 5rpx; position: absolute; left: 60rpx; width: 240rpx; height: 150rpx; top: 40rpx;}.img2{ border-radius: 5rpx; position: absolute; left: 440rpx; width: 240rpx; height: 150rpx; top: 40rpx;}js
var is_1_height, is_1_width, is_2_height, is_2_width, is_img0_width, is_img0_height, is_img1_width, is_img1_height;var item = 0;var fangxiang;Page({ data: { index_0: 3, clubs: [{ image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532684585498&di=39c818a83b5f9d295a662dc9cb3deb4a&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0117e2571b8b246ac72538120dd8a4.jpg%401280w_1l_2o_100sh.jpg' }, { image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532684585498&di=03509b946c2086ab814276a076ec9069&imgtype=0&src=http%3A%2F%2Fimg07.tooopen.com%2Fimages%2F20170316%2Ftooopen_sy_201956178977.jpg' }, { image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532684585497&di=d3bb16864ad73dfedc225209a218ed74&imgtype=0&src=http%3A%2F%2Fwww.qqma.com%2Fimgpic2%2Fcpimagenew%2F2018%2F4%2F5%2F6e1de60ce43d4bf4b9671d7661024e7a.jpg' }] }, onShow: function () { this.animation1 = this.animation2 = this.animation0 = wx.createAnimation({ duration: 600, timingFunction: 'ease', }) }, bindtap_img: function (e) { var that = this; switch (item) { case 0: if (e.target.id == 0) { this.setData({ index_0: 3, }) item = 0; } else if (e.target.id == 1) { this.setData({ index_2: 0, index_0: 2, index_1: 3, }) fangxiang = 'right'; item = 1; } else if (e.target.id == 2) { this.setData({ index_1: 0, index_0: 2, index_2: 3, }) fangxiang = 'left'; item = 2 } break; case 1: if (e.target.id == 0) { this.setData({ index_2: 0, index_1: 2, index_0: 3, }) item = 0 } else if (e.target.id == 1) { this.setData({ index_1: 3, }) fangxiang = 'right'; item = 1 } else if (e.target.id == 2) { this.setData({ index_0: 0, index_1: 2, index_2: 3, }) fangxiang = 'left'; item = 2 } break; case 2: if (e.target.id == 0) { this.setData({ index_0: 3, index_2: 2, index_1: 0, }) item = 0 } else if (e.target.id == 1) { this.setData({ index_0: 0, index_2: 2, index_1: 3, }) fangxiang = 'right'; item = 1 } else if (e.target.id == 2) { this.setData({ index_2: 3, }) fangxiang = 'left'; item = 2 } break; default: console.log('11111') } if (e.target.id == 1) { // 先旋转同时放大，然后平移 this.animation0.scale(is_img1_width / is_img0_width, is_img1_height / is_img0_height).translateX(is_1_width).step() this.setData({ animationData0: this.animation0.export(), }) this.animation1.scale(is_img0_width / is_img1_width, is_img0_height / is_img1_height).translateX(is_1_height).step() this.setData({ animationData1: this.animation1.export(), }) this.animation2.scale(1, 1).translateX(-is_2_height).step() this.setData({ animationData2: this.animation2.export(), }) } else if (e.target.id == 2) { // 先旋转同时放大，然后平移 this.animation0.scale(is_img1_width / is_img0_width, is_img1_height / is_img0_height).translateX(-is_1_width).step() this.setData({ animationData0: this.animation0.export(), }) this.animation1.scale(1, 1).translateX(is_2_height).step() this.setData({ animationData1: this.animation1.export(), }) this.animation2.scale(is_img0_width / is_img1_width, is_img0_height / is_img1_height).translateX(-is_1_height, is_2_width).step() this.setData({ animationData2: this.animation2.export(), }) } else if (e.target.id == 0) { // 先旋转同时放大，然后平移 this.animation0.scale(1, 1).translateX(0).step() this.setData({ animationData0: this.animation0.export(), }) this.animation1.scale(1, 1).translateX(0).step() this.setData({ animationData1: this.animation1.export(), }) this.animation2.scale(1, 1).translateX(0).step() this.setData({ animationData2: this.animation2.export(), }) } var clubs = this.data.clubs; this.setData({ index: e.target.id, current: clubs[e.target.id] }) }, onLoad: function (options) { wx.createSelectorQuery().select('#is_height_1').boundingClientRect(function (rect) { is_1_width = Number(rect.width) is_1_height = Number(rect.height) // 节点的宽度 }).exec(); wx.createSelectorQuery().select('#is_height_2').boundingClientRect(function (rect) { is_2_width = Number(rect.width) // 节点的宽度 is_2_height = Number(rect.height) // 节点的宽度 }).exec(); wx.createSelectorQuery().select('.img0').boundingClientRect(function (rect) { is_img0_width = Number(rect.width) // 节点的宽度 is_img0_height = Number(rect.height) // 节点的宽度 console.log(is_img0_width) }).exec(); wx.createSelectorQuery().select('.img1').boundingClientRect(function (rect) { is_img1_width = Number(rect.width) // 节点的宽度 is_img1_height = Number(rect.height) // 节点的宽度 }).exec(); },})
