模拟微信红包+特效演示
代码已上传至github
github代码地址：https://github.com/Miofly/mio.git
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<meta content="email=no" name="format-detection"/>
<title>端午节</title>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/adaptive.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<style>
.btnTwinkle {
animation: twinkle 2s linear infinite;
}
@keyframes twinkle {
0% {
transform: scale(1);
}
10% {
transform: scale(1.2);
}
20% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
40%, 100% {
transform: scale(1);
}
}
.overturn {
animation: turn 1s 2;
transform-style: preserve-3d;
}
@keyframes turn {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
<body style="height: 100%;width: 100%;background: rgb(23, 7, 7)">
<div style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;z-index: 1;">
<div style="position: relative;background: url('./img/hongbao2@2x.png');background-repeat: no-repeat;background-size: 100%;
background-position: center;margin-left: 0%;width: 6.39rem;height: 9.88rem;">
<div style="position: absolute;left: 50%;width: 2.4rem;height: 2.28rem;bottom: 1.48rem;margin-left: -1.20rem;">
<img onclick="addTurn()" class="btnTwinkle" src="./img/ling@2x.png" style="width: 2.33rem;height: 2.22rem;display: block">
</div>
</div>
</div>
<script>
function addTurn() {
$('.btnTwinkle').addClass('overturn')
setTimeout(function () {
location.href = 'http://192.168.3.124:8888/mio/src/html/project/redEnvelope/share.html'
}, 2000)
}
</script>
</body>
</html>
share.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<meta content="email=no" name="format-detection"/>
<title>端午节</title>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/adaptive.js"></script>
<script type="text/javascript" src="js/share.js"></script>
<link rel="stylesheet" type="text/css" href="css/share.css"/>
</head>
<body style="font-size: 0.05rem;" class="bg-white">
<audio src="./img/gold.mp3" preload="auto" id="mp3"></audio>
<div>
<!--此处跳广告-->
<div style="position: fixed;left: 0.3rem;top: 0.5rem;z-index: 9999">
<img src="./img/back.png" style="width: 0.27rem;height: 0.43rem">
</div>
<div style="text-align: center" onclick="">
<img src="./img/shang@2x.png" style="width: 100%">
<h1 style="font-size:1.15rem;height: 1.61rem;font-weight:600;color:rgba(204,170,118,1);">100.00</h1>
<img src="./img/anniu@2x.png" style="width: 4.48rem;height: 1.13rem;
animation: scale-upOne 2s linear 0s infinite alternate;">
</div>
<div id="sum" style="display: none">
<div id="mb" style="display: block" class="mio-modal-mask"></div>
<div style="position: fixed;top: 0;right: 0.5rem;z-index: 13">
<img id="fxImg" style="width: 6.02rem;height: 1.83rem;" src="./img/wei.png">
</div>
<div style="position: fixed;width: 100%;left: 0;text-align: center;top: 25%;z-index: 13">
<img id="shareImg" style="width: 5.81rem;height: 5.78rem;" class="shake" src="./img/jx.png">
</div>
</div>
<div class="show_list">
<ul id="demoDown"></ul>
</div>
</div>
<script>
var mList = [{mimg: '../../img/xtx/1.jpg', mname: "love girl"}, {
mimg: '../../img/xtx/2.jpg',
mname: "laneud"
}, {mimg: '../../img/xtx/3.jpg', mname: "胡歌的小迷妹"}, {
mimg: '../../img/xtx/4.jpg',
mname: "奥Y他们"
}, {mimg: '../../img/xtx/5.jpg', mname: "拉开日~"}, {
mimg: '../../img/xtx/6.jpg',
mname: "NFHEY楷模"
}, {mimg: '../../img/xtx/7.jpg', mname: "默默的爱"}, {
mimg: '../../img/xtx/8.jpg',
mname: "本田销售"
}, {mimg: '../../img/xtx/9.jpg', mname: "小妞儿"}, {
mimg: '../../img/xtx/10.jpg',
mname: "MK-星图"
}, {mimg: '../../img/xtx/11.jpg', mname: "蔡徐坤"}, {
mimg: '../../img/xtx/12.jpg',
mname: "宝贝"
}, {mimg: '../../img/xtx/13.jpg', mname: "左左妈妈"}, {
mimg: '../../img/xtx/14.jpg',
mname: "大量收号"
}, {mimg: '../../img/xtx/15.jpg', mname: "吃遍天下无敌手"}, {
mimg: '../../img/xtx/16.jpg',
mname: "情归何处"
}, {mimg: '../../img/xtx/17.jpg', mname: "小亮儿奶奶"}, {
mimg: '../../img/xtx/18.jpg',
mname: "柳暗花明"
}, {mimg: '../../img/xtx/19.jpg', mname: "pgOne"}, {mimg: '../../img/xtx/20.jpg', mname: "周.."}]
for (var i = 0; i < mList.length; i++) {
var img = mList[i].mimg;
var name = mList[i].mname;
listDiscuss(img, name)
}
function listDiscuss(img, name) {
var sjm = sjMoneyNum();
var sjt = sjTimeAdd();
var mhtml = '<li><div class="user_infor"><img src="' + img + '" class="head_img"><div class="user_name"><p>' + name + '<\/p><span>' + sjt + '<\/span><\/div></div><div class="money">' + sjm + '元<\/div></li>';
$("#demoDown").append(mhtml);
}
function Scroll() {
}
Scroll.prototype.upScroll = function (dom, _h, interval) {
var dom = document.getElementById(dom);
var timer = setTimeout(function () {
var _field = dom.firstElementChild;
_field.style.marginTop = _h;
clearTimeout(timer);
}, 1000)
setInterval(function () {
var _field = dom.firstElementChild;
_field.style.marginTop = "0px";
dom.appendChild(_field);
var _field = dom.firstElementChild
_field.style.marginTop = _h;
}, interval)
}
var myScroll = new Scroll();
myScroll.upScroll("demoDown", "-1.2rem", 2500);
// 免接口分享
var shareATimes = 0
var shareTTimes = 0
var hiddenProperty = 'hidden' in document ? 'hidden'
: 'webkitHidden' in document ? 'webkitHidden'
: 'mozHidden' in document ? 'mozHidden'
: null
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange')
var onVisibilityChange = function () {
if (!document[hiddenProperty]) {
window.show_time = Date.now()
shareATimes += 1
if (shareATimes > 4) {
shareTTimes += 1
setTimeout(share_tip(shareATimes, shareTTimes), 100)
} else {
setTimeout(share_tip(shareATimes, -1), 100)
}
} else {
window.hidden_time = Date.now()
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange) // 监听
function share_tip(share_app_times, share_timeline_times) { // 分享处理
console.log('处理了吗')
if (share_timeline_times == -1) {
if (shareATimes == 1) {
$('#shareImg').css('height', '6.28rem')
$('#shareImg').removeClass('shake')
$('#shareImg').addClass('shakeTwo')
$('#shareImg').attr('src', './img/jx1.png')
} else if (shareATimes == 2) {
$('#shareImg').css('height', '5.78rem')
$('#shareImg').removeClass('shakeTwo')
$('#shareImg').addClass('shake')
$('#shareImg').attr('src', './img/jx2.png')
} else if (shareATimes == 3) {
$('#shareImg').removeClass('shake')
$('#shareImg').addClass('shakeTwo')
$('#shareImg').attr('src', './img/jx3.png')
} else if (shareATimes == 4) {
$('#shareImg').css('height', '6.28rem')
$('#shareImg').removeClass('shakeTwo')
$('#shareImg').addClass('shake')
$('#shareImg').attr('src', './img/jx4.png')
$('#fxImg').attr('src', './img/peng.png')
} else {
console.log('结束')
}
}
}
</script>
</body>
</html>share.js
$(function () {
document.body.addEventListener('touchmove', function (evt) { // 禁止微信浏览器拖动
evt.preventDefault()
}, {passive: false})
audioAutoPlay("mp3");
start()
setTimeout(function() {
$('#sum').show(10)
}, 2300)
})
var mians;
var mainbox;
var main = []; //所有数据
var mainheight; //高
var mainwidth; //宽
var speed = 1; //速度
var golddh = null;
var goldimg;
var imgwidth = 35; //金币大小宽度
function audioAutoPlay(id){
var audio1 = document.getElementById(id);
audio1.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio1.play();
}, false);
}
function sjMoneyNum(){
var moneySjs = (Math.random() * 6000 + 6000) / 100;
var moneyNum = moneySjs.toFixed(2);
return moneyNum;
}
function remainMoneyNum(){
var remainSjs = Math.random() * 600000 + 200000;
var remainNum = remainSjs.toFixed(2);
return remainNum;
}
function sjTimeAdd(){
var now = new Date();
var hour = now.getHours();
var minu = now.getMinutes();
var c_minu = 0;
var sjst = Math.floor(Math.random() * minu);
if(sjst<10){
sjst = "0"+sjst;
}
return hour+":"+sjst;
}
function start() {
$('body').append('<img id="goldimg" ' +
'src="http://allwebloction.yifutangvip.net/invite/assets/module1/icon1.png" />').append(
'<canvas id="canvas" style="width: 100%;height: 100%;position: fixed;top: 0;left: 0"></canvas>');
$('#canvas').click(function () {
$('.btn2').click();
});
mainheight = $('#canvas').height(); //高
mainwidth = $('#canvas').width(); //宽
goldimg = document.getElementById("goldimg");
mians = document.getElementById("canvas");
mainbox = mians.getContext("2d");
$('#canvas').attr({
width: $(window).width(),
height: $(window).height()
});
// 开始动画 金币位置数据
for (var i = 0; i < 70; i++) {
main.push({
x: randomNum(50, mainwidth - 50),
y: randomNum(-800, 0),
direction: Math.round(Math.random()) ? 'left' : 'right', //左右方向
updown: 'down', //上下方向
jump: randomNum(30, 80), //到底跳跃
bottom: 0, //到底第几次
jumpspeed: randomNum(5, 10), //跳跃速度
downspeed: randomNum(15, 25), //下降速度
leftright: randomNum(10, 15) //左右跳跃幅度
});
}
playdh();
}
function playdh() {
clearInterval(golddh);
window.requestAnimationFrame(function () {
for (var i = 0; i < main.length; i++) {
var item = main[i];
item.direction == "left" ? item.x -= item.leftright / 10 : item.x += item.leftright / 10;
var thisspeed = item.bottom >= 1 ? item.jumpspeed : item.downspeed;
if (item.y >= mainheight - imgwidth) {
//金币到底到底
if (item.bottom == 0) {
// 第一次到底 反向
item.bottom = 1; //增加到底次输
item.updown = 'up';
}
if (item.bottom == 2) {
main.splice(i, 1);
if (main.length == 0) {
clearInterval(golddh);
$('#goldimg').remove();
$('#canvas').remove();
}
}
}
if (item.bottom == 1) {
item.jump -= 3;
// console.log(item.jump)
if (item.jump <= 0) {
// 反向到底
item.updown = 'down';
item.bottom = 2;
}
}
item.updown == "down" ? item.y += thisspeed : item.y -= thisspeed;
}
mainbox.clearRect(0, 0, mainwidth, mainheight);
draw(main);
});
}
function draw(e) {
for (var i = 0; i < e.length; i++) {
var item = e[i];
mainbox.drawImage(goldimg, item.x, item.y, imgwidth, imgwidth);
}
playdh();
}
function randomNum(minNum, maxNum) {
// 随机数
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-06-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
