diff --git a/view/peko/modules/boxActivity/css/index.css b/view/peko/modules/boxActivity/css/index.css new file mode 100644 index 0000000..c28f441 --- /dev/null +++ b/view/peko/modules/boxActivity/css/index.css @@ -0,0 +1,384 @@ +html, +body { + width: 100%; + background: url(../images/bg.png) no-repeat; + background-size: 10rem 39.94667rem; +} + +.rabbit { + z-index: 999; + width: 0.8rem; + height: 0.8rem; +} + +.back { + position: fixed; + top: 0.93333rem; + left: 0.45333rem; + z-index: 99; + width: 0.82667rem; + height: 0.82667rem; +} + +.back img { + width: 100%; + height: 100%; +} + +.back p { + color: #fff; + font-size: 0.42667rem; + position: absolute; + width: 9rem; + left: 0; + top: 0; + height: 100%; + text-align: center; + line-height: 0.82667rem; +} + +.layui-m-layershade { + background-color: rgba(0, 0, 0, 0.4) !important; +} + +.header { + width: 10rem; + height: 10rem; + margin: 0 auto -2rem; + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; +} + +.tab { + width: 7.86667rem; + height: 1.01333rem; + line-height: 1.01333rem; + margin: 0 auto 0; + display: flex; + justify-content: space-between; + background: #1D388F; + border: 0.02667rem solid #8FC5FF; + box-sizing: border-box; + border-radius: 0.16rem; +} + +.tab div { + width: 3.94667rem; + text-align: center; + color: rgba(255, 255, 255, 0.8); + font-size: 0.37333rem; +} + +.tab .atc { + color: #fff; + background: url(../images/tabAct.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab { + width: 8.96rem; + height: 2.24rem; + display: flex; + justify-content: space-between; + margin: 0.90667rem auto 0; +} + +.boxTab div { + width: 2.82667rem; + height: 100%; + position: relative; +} + +.boxTab div .top { + width: 1.97333rem; + height: 1.97333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 1.01333rem; +} + +.boxTab div p { + width: 100%; + text-align: center; + color: #696C70; + font-size: 0.32rem; + position: absolute; + left: 0; + top: 1.25333rem; + font-weight: 500; +} + +.boxTab div span { + width: 100%; + text-align: center; + font-size: 0.29333rem; + height: 0.32rem; + line-height: 0.32rem; + color: #696C70; + font-weight: 400; + vertical-align: middle; + position: absolute; + left: 0; + top: 1.70667rem; +} + +.boxTab div span .img { + width: 0.32rem; + height: 0.32rem; + display: inline-block; + vertical-align: middle; + background: url(../images/notDiamond.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab div span b { + vertical-align: middle; +} + +.boxTab .box1 { + background: url(../images/notShow.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .box1 .top { + background: url(../images/notBox1.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .box2 { + background: url(../images/notShow.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .box2 .top { + background: url(../images/notBox2.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .box3 { + background: url(../images/notShow.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .box3 .top { + background: url(../images/notBox3.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act1 { + background: url(../images/show.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act1 .top { + background: url(../images/box1.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act1 p { + color: #FFFFFF; +} + +.boxTab .act1 span .img { + background: url(../images/diamond.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act1 span b { + color: #FFFFFF; +} + +.boxTab .act2 { + background: url(../images/show.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act2 .top { + background: url(../images/box2.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act2 p { + color: #FFFFFF; +} + +.boxTab .act2 span .img { + background: url(../images/diamond.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act2 span b { + color: #FFFFFF; +} + +.boxTab .act3 { + background: url(../images/show.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act3 .top { + background: url(../images/box3.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act3 p { + color: #FFFFFF; +} + +.boxTab .act3 span .img { + background: url(../images/diamond.png) no-repeat; + background-size: 100% 100%; +} + +.boxTab .act3 span b { + color: #FFFFFF; +} + +.page1 .boxList { + width: 9.14667rem; + display: block; + margin: 0.05333rem auto 0; +} + +.page1 .boxList1 { + height: 26.18667rem; +} + +.page1 .boxList2 { + height: 20.72rem; +} + +.page1 .boxList3 { + height: 21.84rem; +} + +.page2 { + display: none; + width: 9.14667rem; + height: 8.3rem; + margin: 0 auto 0; + overflow-y: scroll; +} + +.page2::-webkit-scrollbar { + display: none; +} + +.page2 .div { + width: 9.14667rem; + height: 1.97333rem; + margin-bottom: 0.10667rem; + background: url(../images/liBg.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + padding: 0 0.32rem; +} + +.page2 .div .leftUser { + float: left; + width: 1.76rem; + margin-right: 0.21333rem; + margin-top: 0.21333rem; +} + +.page2 .div .leftUser .tx { + display: block; + width: 1.06667rem; + height: 1.06667rem; + border-radius: 50%; + margin: 0 auto; +} + +.page2 .div .leftUser p { + width: 100%; + text-align: center; + color: #fff; + font-size: 0.29333rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: 0.05333rem; +} + +.page2 .div .inFo { + float: left; + width: 3rem; + text-align: center; + margin-top: 0.53333rem; +} + +.page2 .div .inFo p { + width: 100%; + text-align: center; + font-weight: 400; + color: rgba(255, 255, 255, 0.9); + font-size: 0.32rem; + margin-bottom: 0.2rem; +} + +.page2 .div .inFo p b { + color: #FFEF8A; +} + +.page2 .div .inFo span { + width: 100%; + display: block; + text-align: center; + font-weight: 400; + color: rgba(255, 255, 255, 0.9); + font-size: 0.32rem; +} + +.page2 .div .inFo span b { + color: #7AE9FF; +} + +.page2 .div .rigtUser { + float: left; + width: 1.76rem; + margin-top: 0.21333rem; +} + +.page2 .div .rigtUser .tx { + display: block; + width: 1.06667rem; + height: 1.06667rem; + border-radius: 50%; + margin: 0 auto; +} + +.page2 .div .rigtUser p { + width: 100%; + text-align: center; + color: #fff; + font-size: 0.29333rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: 0.05333rem; +} + +.page2 .div .gift { + float: right; + display: block; + width: 1.6rem; + height: 1.6rem; + margin-top: 0.18667rem; +} + +.disclaimers { + width: 100%; + margin-top: 0.24rem; + margin-bottom: 0.26667rem; +} + +.disclaimers p { + width: 100%; + text-align: center; + color: #FFFFFF; + font-size: 0.26667rem; + margin-bottom: 0.13333rem; +} diff --git a/view/peko/modules/boxActivity/css/index.scss b/view/peko/modules/boxActivity/css/index.scss new file mode 100644 index 0000000..aa47e44 --- /dev/null +++ b/view/peko/modules/boxActivity/css/index.scss @@ -0,0 +1,401 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + background: url(../images/bg.png) no-repeat; + background-size: px2rem(750) px2rem(2996); +} + +.rabbit { + z-index: 999; + width: px2rem(60); + height: px2rem(60); +} + +.back { + position: fixed; + top: px2rem(70); + left: px2rem(34); + z-index: 99; + width: px2rem(62); + height: px2rem(62); + + img { + width: 100%; + height: 100%; + } + + p { + color: #fff; + font-size: px2rem(32); + position: absolute; + width: 9rem; + left: 0; + top: 0; + height: 100%; + text-align: center; + line-height: px2rem(62); + } +} + +.layui-m-layershade { + background-color: rgba(0, 0, 0, .4) !important; +} + +.header { + width: px2rem(750); + height: px2rem(750); + margin: 0 auto -2rem; + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; +} + +.tab { + width: px2rem(590); + height: px2rem(76); + line-height: px2rem(76); + margin: 0 auto 0; + display: flex; + justify-content: space-between; + background: #1D388F; + border: px2rem(2) solid #8FC5FF; + box-sizing: border-box; + border-radius: px2rem(12); + + div { + width: px2rem(296); + text-align: center; + color: rgba(255, 255, 255, 0.8); + font-size: px2rem(28); + } + + .atc { + color: #fff; + background: url(../images/tabAct.png) no-repeat; + background-size: 100% 100%; + } +} + + +.boxTab { + width: px2rem(672); + height: px2rem(168); + display: flex; + justify-content: space-between; + margin: px2rem(68) auto 0; + + div { + width: px2rem(212); + height: 100%; + position: relative; + + .top { + width: px2rem(148); + height: px2rem(148); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(76); + } + + p { + width: 100%; + text-align: center; + color: #696C70; + font-size: px2rem(24); + position: absolute; + left: 0; + top: px2rem(94); + font-weight: 500; + } + + span { + width: 100%; + text-align: center; + font-size: px2rem(22); + height: px2rem(24); + line-height: px2rem(24); + color: #696C70; + font-weight: 400; + vertical-align: middle; + position: absolute; + left: 0; + top: px2rem(128); + + .img { + width: px2rem(24); + height: px2rem(24); + display: inline-block; + vertical-align: middle; + background: url(../images/notDiamond.png) no-repeat; + background-size: 100% 100%; + } + + b { + vertical-align: middle; + } + } + } + + .box1 { + background: url(../images/notShow.png) no-repeat; + background-size: 100% 100%; + + .top { + background: url(../images/notBox1.png) no-repeat; + background-size: 100% 100%; + } + } + + .box2 { + background: url(../images/notShow.png) no-repeat; + background-size: 100% 100%; + + .top { + background: url(../images/notBox2.png) no-repeat; + background-size: 100% 100%; + } + } + + .box3 { + background: url(../images/notShow.png) no-repeat; + background-size: 100% 100%; + + .top { + background: url(../images/notBox3.png) no-repeat; + background-size: 100% 100%; + } + } + + .act1 { + background: url(../images/show.png) no-repeat; + background-size: 100% 100%; + + .top { + background: url(../images/box1.png) no-repeat; + background-size: 100% 100%; + } + + + p { + color: #FFFFFF; + } + + span { + .img { + background: url(../images/diamond.png) no-repeat; + background-size: 100% 100%; + } + + b { + color: #FFFFFF; + } + } + } + + .act2 { + background: url(../images/show.png) no-repeat; + background-size: 100% 100%; + + .top { + background: url(../images/box2.png) no-repeat; + background-size: 100% 100%; + } + + + p { + color: #FFFFFF; + } + + span { + .img { + background: url(../images/diamond.png) no-repeat; + background-size: 100% 100%; + } + + b { + color: #FFFFFF; + } + } + } + + .act3 { + background: url(../images/show.png) no-repeat; + background-size: 100% 100%; + + .top { + background: url(../images/box3.png) no-repeat; + background-size: 100% 100%; + } + + p { + color: #FFFFFF; + } + + span { + .img { + background: url(../images/diamond.png) no-repeat; + background-size: 100% 100%; + } + + b { + color: #FFFFFF; + } + } + } +} + +.page1 { + // display: none; + + .boxList { + width: px2rem(686); + display: block; + margin: px2rem(4) auto 0; + } + + .boxList1 { + height: px2rem(1964); + } + + .boxList2 { + height: px2rem(1554); + } + + .boxList3 { + height: px2rem(1638); + } +} + +.page2 { + display: none; + width: px2rem(686); + height: 8.3rem; + margin: 0 auto 0; + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } + + .div { + width: px2rem(686); + height: px2rem(148); + margin-bottom: px2rem(8); + background: url(../images/liBg.png) no-repeat; + background-size: 100% 100%; + box-sizing: border-box; + padding: 0 px2rem(24); + + .leftUser { + float: left; + width: px2rem(132); + margin-right: px2rem(16); + margin-top: px2rem(16); + + .tx { + display: block; + width: px2rem(80); + height: px2rem(80); + border-radius: 50%; + margin: 0 auto; + } + + p { + width: 100%; + text-align: center; + color: #fff; + font-size: px2rem(22); + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: px2rem(4); + } + } + + .inFo { + float: left; + width: 3rem; + text-align: center; + margin-top: px2rem(40); + + p { + width: 100%; + text-align: center; + font-weight: 400; + color: rgba(255, 255, 255, 0.9); + font-size: px2rem(24); + margin-bottom: px2rem(15); + + b { + color: #FFEF8A; + } + } + + span { + width: 100%; + display: block; + text-align: center; + font-weight: 400; + color: rgba(255, 255, 255, 0.9); + font-size: px2rem(24); + + b { + color: #7AE9FF; + } + } + } + + .rigtUser { + float: left; + width: px2rem(132); + margin-top: px2rem(16); + + .tx { + display: block; + width: px2rem(80); + height: px2rem(80); + border-radius: 50%; + margin: 0 auto; + } + + p { + width: 100%; + text-align: center; + color: #fff; + font-size: px2rem(22); + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-top: px2rem(4); + } + } + + .gift { + float: right; + display: block; + width: px2rem(120); + height: px2rem(120); + margin-top: px2rem(14); + } + } +} + +.disclaimers { + width: 100%; + margin-top: px2rem(18); + margin-bottom: px2rem(20); + + p { + width: 100%; + text-align: center; + color: #FFFFFF; + font-size: px2rem(20); + margin-bottom: px2rem(10); + } +} \ No newline at end of file diff --git a/view/peko/modules/boxActivity/images/bg.png b/view/peko/modules/boxActivity/images/bg.png new file mode 100644 index 0000000..00f3b5c Binary files /dev/null and b/view/peko/modules/boxActivity/images/bg.png differ diff --git a/view/peko/modules/boxActivity/images/box1.png b/view/peko/modules/boxActivity/images/box1.png new file mode 100644 index 0000000..49a8b77 Binary files /dev/null and b/view/peko/modules/boxActivity/images/box1.png differ diff --git a/view/peko/modules/boxActivity/images/box2.png b/view/peko/modules/boxActivity/images/box2.png new file mode 100644 index 0000000..897ab19 Binary files /dev/null and b/view/peko/modules/boxActivity/images/box2.png differ diff --git a/view/peko/modules/boxActivity/images/box3.png b/view/peko/modules/boxActivity/images/box3.png new file mode 100644 index 0000000..a7f0621 Binary files /dev/null and b/view/peko/modules/boxActivity/images/box3.png differ diff --git a/view/peko/modules/boxActivity/images/boxList1.png b/view/peko/modules/boxActivity/images/boxList1.png new file mode 100644 index 0000000..df3ed43 Binary files /dev/null and b/view/peko/modules/boxActivity/images/boxList1.png differ diff --git a/view/peko/modules/boxActivity/images/boxList2.png b/view/peko/modules/boxActivity/images/boxList2.png new file mode 100644 index 0000000..85d02a2 Binary files /dev/null and b/view/peko/modules/boxActivity/images/boxList2.png differ diff --git a/view/peko/modules/boxActivity/images/boxList3.png b/view/peko/modules/boxActivity/images/boxList3.png new file mode 100644 index 0000000..f600b3c Binary files /dev/null and b/view/peko/modules/boxActivity/images/boxList3.png differ diff --git a/view/peko/modules/boxActivity/images/diamond.png b/view/peko/modules/boxActivity/images/diamond.png new file mode 100644 index 0000000..e157233 Binary files /dev/null and b/view/peko/modules/boxActivity/images/diamond.png differ diff --git a/view/peko/modules/boxActivity/images/header.png b/view/peko/modules/boxActivity/images/header.png new file mode 100644 index 0000000..c97427f Binary files /dev/null and b/view/peko/modules/boxActivity/images/header.png differ diff --git a/view/peko/modules/boxActivity/images/liBg.png b/view/peko/modules/boxActivity/images/liBg.png new file mode 100644 index 0000000..b538d97 Binary files /dev/null and b/view/peko/modules/boxActivity/images/liBg.png differ diff --git a/view/peko/modules/boxActivity/images/logo.png b/view/peko/modules/boxActivity/images/logo.png new file mode 100644 index 0000000..e428641 Binary files /dev/null and b/view/peko/modules/boxActivity/images/logo.png differ diff --git a/view/peko/modules/boxActivity/images/notBox1.png b/view/peko/modules/boxActivity/images/notBox1.png new file mode 100644 index 0000000..347d648 Binary files /dev/null and b/view/peko/modules/boxActivity/images/notBox1.png differ diff --git a/view/peko/modules/boxActivity/images/notBox2.png b/view/peko/modules/boxActivity/images/notBox2.png new file mode 100644 index 0000000..276bc3f Binary files /dev/null and b/view/peko/modules/boxActivity/images/notBox2.png differ diff --git a/view/peko/modules/boxActivity/images/notBox3.png b/view/peko/modules/boxActivity/images/notBox3.png new file mode 100644 index 0000000..2f68c74 Binary files /dev/null and b/view/peko/modules/boxActivity/images/notBox3.png differ diff --git a/view/peko/modules/boxActivity/images/notDiamond.png b/view/peko/modules/boxActivity/images/notDiamond.png new file mode 100644 index 0000000..a42c578 Binary files /dev/null and b/view/peko/modules/boxActivity/images/notDiamond.png differ diff --git a/view/peko/modules/boxActivity/images/notShow.png b/view/peko/modules/boxActivity/images/notShow.png new file mode 100644 index 0000000..637bc48 Binary files /dev/null and b/view/peko/modules/boxActivity/images/notShow.png differ diff --git a/view/peko/modules/boxActivity/images/show.png b/view/peko/modules/boxActivity/images/show.png new file mode 100644 index 0000000..194696a Binary files /dev/null and b/view/peko/modules/boxActivity/images/show.png differ diff --git a/view/peko/modules/boxActivity/images/tabAct.png b/view/peko/modules/boxActivity/images/tabAct.png new file mode 100644 index 0000000..075a02e Binary files /dev/null and b/view/peko/modules/boxActivity/images/tabAct.png differ diff --git a/view/peko/modules/boxActivity/images/travel/back.png b/view/peko/modules/boxActivity/images/travel/back.png new file mode 100644 index 0000000..7b81adb Binary files /dev/null and b/view/peko/modules/boxActivity/images/travel/back.png differ diff --git a/view/peko/modules/boxActivity/images/xingyunbao.png b/view/peko/modules/boxActivity/images/xingyunbao.png new file mode 100644 index 0000000..d2b3ec8 Binary files /dev/null and b/view/peko/modules/boxActivity/images/xingyunbao.png differ diff --git a/view/peko/modules/boxActivity/index.html b/view/peko/modules/boxActivity/index.html new file mode 100644 index 0000000..58a7cbd --- /dev/null +++ b/view/peko/modules/boxActivity/index.html @@ -0,0 +1,90 @@ + + + + + + + 宝箱 + + + + + + +
+ +
+ +
+ +
+
宝箱介绍
+
手气榜
+
+ + +
+
+
+

白銀寶箱

+ +
600 + +
+
+
+

黃金寶箱

+ +
2000 + +
+
+
+

鉆石寶箱

+ +
5000 + +
+
+ + +
+ + +
+ + +
+
+
+ +

我是名字哦哦哦哦哦哦

+
+
+

赠送 白银宝箱*1 给

+ 获得 牛气冲天*1 +
+
+ +

我是名字哦哦哦哦哦哦

+
+ +
+
+ + +
+

活動最終解釋權歸Piko Live所有

+

本活動以及獎勵與Google/蘋果公司無

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/view/peko/modules/boxActivity/js/index.js b/view/peko/modules/boxActivity/js/index.js new file mode 100644 index 0000000..fec230e --- /dev/null +++ b/view/peko/modules/boxActivity/js/index.js @@ -0,0 +1,123 @@ +let urlPrefix = getUrlPrefix() +let browser = checkVersion() +let env = EnvCheck(); +var boxId = []; +if (env == 'test') { + boxId = [2167, 2166, 2165]; + new VConsole(); +} else { + boxId = [2210, 2211, 2212]; +} +var giftId = boxId[0]; +var page = 1; +// 封裝layer消息提醒框 +let layerIndex +const showLoading = (content = '加載中...') => { + layer.open({ + type: 2, + shadeClose: false, + content, + success (e) { + layerIndex = $(e).attr('index') + } + }) +} +const hideLoading = (index) => { + layer.close(index) +} +const toastMsg = (content = '操作完成', time = 2) => { + layer.open({ + content, + time, + skin: 'msg' + }) +}// 初始化函數 +$(function () { + getInfoFromClient() + setTimeout(function () { + // 頁面全屏 + if (browser.app) { + if (browser.android) { + window.androidJsObj.initShowNav(false) + } else { + window.webkit.messageHandlers.initShowNav.postMessage(0) + } + }; + // 頂部返回事件 + $('.back').click(() => { + if (browser.android) { + window.androidJsObj.closeWebView() + } else { + window.webkit.messageHandlers.closeWebView.postMessage(null) + } + }) + getRank(); + }, 100) +}) +// 榜单接口 +function getRank () { + $('.page2 .div').remove(); + showLoading() + networkRequest({ + type: 'GET', + url: urlPrefix + '/luckybag/getRank', + data: { giftId }, + success (res) { + if (res.code === 200) { + var str = ''; + res.data.forEach(res => { + str += ` +
+
+ +

${res.sendNick}

+
+
+

贈送 ${res.luckyBagName}*${res.luckyBagNum} 給

+ 獲得 ${res.giftName}*${res.giftNum} +
+
+ +

${res.receiveNick}

+
+ +
+ ` + }); + $('.page2').append(str); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網絡錯誤，請退出重進') + } + }) +} +// 页面切换 +$('.tab div').click(function () { + var i = $(this).index() + 1; + page = i; + $(this).addClass('atc').siblings().removeClass('atc'); + $('.page1').hide(); + $('.page2').hide(); + $(`.page${i}`).show(); + if (i == 2) { + getRank(); + } +}) +// 宝箱切换 +$('.boxTab .box').click(function () { + var i = $(this).index(); + giftId = boxId[i]; + $('.boxTab .box').removeClass('act1').removeClass('act2').removeClass('act3'); + $(this).addClass(`act${i + 1}`); + if (page == 1) { + $('.page1 .boxList').removeClass('boxList1').removeClass('boxList2').removeClass('boxList3').addClass(`boxList${i + 1}`); + $('.page1 .boxList').attr('src', `./images/boxList${i + 1}.png`); + } else { + getRank(); + } +}) \ No newline at end of file diff --git a/view/peko/modules/boxActivity/js/wow.js b/view/peko/modules/boxActivity/js/wow.js new file mode 100644 index 0000000..e35ea13 --- /dev/null +++ b/view/peko/modules/boxActivity/js/wow.js @@ -0,0 +1,46 @@ +var baba = document.querySelector('body'); +baba.addEventListener('click', function (e) { + // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" }); + tianJia(e); +}) + +var erZi = []; +function tianJia (e) { + var sunZi = document.createElement('div'); + sunZi.className = 'rabbit'; + // sunZi.innerHTML = ''; + sunZi.innerHTML = ''; + baba.appendChild(sunZi); + erZi.push({ + el: sunZi, + top: e.pageY - 80, + left: e.pageX - 20, + opacity: 1.3, + scale: 1, + color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})` + }); + move(); +}; +function move () { + for (var i = 0; i < erZi.length; i++) { + if (erZi[i].opacity <= 0) { + baba.removeChild(erZi[i].el); + erZi.splice(i, 1); + return; + } + erZi[i].top--; + erZi[i].opacity = erZi[i].opacity - 0.04; + // erZi[i].scale = erZi[i].scale + 0.0001; + erZi[i].el.style.cssText = ` + top: ${erZi[i].top}px; + left: ${erZi[i].left}px; + color: ${erZi[i].color}; + opacity: ${erZi[i].opacity}; + transform: scale(${erZi[i].scale}); + position: absolute; + ` + + } + window.requestAnimationFrame(move); + // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" }); +} \ No newline at end of file