h5春节小游戏制作
作者:互联网
<!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" /> <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no" /> <title>Document</title> <link rel="stylesheet" href="./css/siper.min.css" /> <link rel="stylesheet" href="./css/reset.min.css" /> <link rel="stylesheet" href="./css/public.min.css" /> <link rel="stylesheet" href="./css/index.css" /> <link rel="stylesheet" href="./css/animate.min.css" /> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script> <script src="./js/font-size.min.js"></script> <style> body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-wrapper { width: 4rem; height: 6rem !important; } .swiper-slide { text-align: center; font-size: 18px; width: 4rem; height: 1rem; line-height: 100px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-size: 100%; } .active { background: url("./img/congratulatory_kuang.png") no-repeat center; background-size: 100%, 100%; } .active span { color: #ca0000 !important; } .swiper-slide { height: 1rem !important; } .swiper-slide span { font-size: 0.6rem; font-family: "方正榜书行简体"; color: #ffe291; height: 42px; line-height: 42px; } .refresh { position: absolute; line-height: 100px; bottom: 100%; text-align: center; width: 100%; } .loadmore { position: absolute; line-height: 20px; top: 100%; text-align: center; width: 100%; } .swiper-scrollbar-drag { height: 2rem !important; } .congratulatory .next { top: 9.3rem; left: 4rem; } .congratulatory .prev { top: 9.3rem; right: 2rem; } .congratulatory .select_niu { width: 4rem; top: 2.5rem; left: 1.7rem; } .congratulatory .swiper-slide span { width: 60%; } .congratulatory .swiper-slide:nth-child(1) span { background: url("./img/congratulatory1.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(1).active span { background: url("./img/congratulatory11.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(2) span { background: url("./img/congratulatory2.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(2).active span { background: url("./img/congratulatory22.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(3) span { background: url("./img/congratulatory3.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(3).active span { background: url("./img/congratulatory33.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(4) span { background: url("./img/congratulatory4.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(4).active span { background: url("./img/congratulatory44.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(5) span { background: url("./img/congratulatory5.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(5).active span { background: url("./img/congratulatory55.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(6) span { background: url("./img/congratulatory6.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(6).active span { background: url("./img/congratulatory66.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(7) span { background: url("./img/congratulatory7.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(7).active span { background: url("./img/congratulatory77.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(8) span { background: url("./img/congratulatory8.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(8).active span { background: url("./img/congratulatory88.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(9) span { background: url("./img/congratulatory9.png") no-repeat center; background-size: 100%; } .congratulatory .swiper-slide:nth-child(9).active span { background: url("./img/congratulatory99.png") no-repeat center; background-size: 100%; } </style> </head> <body class="o-hidden" style="height: 100vh"> <div class="w750 o-hidden"> <div class="w750 p-r bg index"> <div class="p-a text_time p-r"> <div class="xwf_2021 animated fadeInRight fast"></div> <div class="xwf_2022 animated fadeInRight fast" style="animation-delay: 0.5s" ></div> <div class="xwf_2023 animated fadeInRight fast" style="animation-delay: 1s" ></div> <div class="xwf_2024 animated fadeInRight fast" style="animation-delay: 1.5s" ></div> <div class="xwf_2025 p-a animated fadeInRight fast" style="animation-delay: 2s" > <img src="./img/jinniu.png" alt="" /> </div> </div> <div class="p-a niu"> <img src="./img/niu.png" alt="" /> </div> <div class="p-a text animated fadeInLeft fast delay-1s"></div> </div> <div class="w750 p-r box hidden"> <div class="select"> <!-- 牛 --> <div class="select_niu p-a"> <img class="hidden" src="./img/one_show.png" alt="" /> <img class="hidden" src="./img/two_show.png" alt="" /> <img class="visib" src="./img/three_show.png" alt="" /> <img class="hidden" src="./img/four_show.png" alt="" /> <img class="hidden" src="./img/five_show.png" alt="" /> </div> <!-- 确认选择 --> <div class="confirm p-a" style="top: 6.7rem; left: 2.5rem"> <span>确认选择</span> </div> <!-- 切换形象 --> <div class="switch p-a d-flex"> <div class="animated tada fast delay-1s">点击牛</div> <div class="animated tada fast delay-2s">切换</div> <div class="animated tada fast delay-3s">形象</div> </div> <!-- 云 --> <div class="xwf_cloud p-r"> <div class="p-a left"></div> <div class="p-a right"></div> </div> <!-- 转盘 --> <div class="turntable p-r" style="top: 1rem"> <div class="p-a one"><img src="./img/one.png" alt="" /></div> <div class="p-a two"><img src="./img/two.png" alt="" /></div> <div class="p-a three"><img src="./img/three.png" alt="" /></div> <div class="p-a four"><img src="./img/four.png" alt="" /></div> <div class="p-a five"><img src="./img/five.png" alt="" /></div> </div> <!-- 指针 --> <div class="pointer p-a"></div> </div> </div> <div class="congratulatory w750 p-r hidden"> <div class="select"> <!-- 牛 --> <div class="select_niu p-a o-hidden"> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide active"><span></span></div> <div class="swiper-slide"><span></span></div> <div class="swiper-slide"><span></span></div> <div class="swiper-slide"><span></span></div> <div class="swiper-slide"><span></span></div> <div class="swiper-slide"><span></span></div> <div class="swiper-slide"><span></span></div> <div class="swiper-slide"><span></span></div> <div class="swiper-slide"><span></span></div> </div> </div> </div> <!-- 上一步 预览海报 --> <div> <div class="confirm p-a prev"> <span>上一步</span> </div> <div class="confirm p-a next"> <span>预览海报</span> </div> </div> <!-- 云 --> <div class="xwf_cloud p-r"> <div class="p-a left"></div> <div class="p-a right"></div> </div> </div> </div> <div class="w750 congratulatory1 hidden"> <div class="select p-r"> <div class="p-r"> <img src="./img/one_show.png" alt="" class="p-a" style="width: 3rem; height: 4rem; top: 2.5rem; left: 2.3rem" /> <div class="select_niu p-a p-r"> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> </div> </div> <!-- 上一步下一步 --> <div> <div class="confirm p-a prev"> <span>上一步</span> </div> <div class="confirm p-a next"> <span>下一步</span> </div> </div> <!-- 颜色 --> <div class="select_color p-a d-flex flex-wrap" style="width: 6rem"> <div class="div div1 mb10 blur"> <div style=" background-color: #30e1e3; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div2 cyan"> <div style=" background-color: #b9d9b2; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div3 green"> <div style=" background-color: #1eb192; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div4 orange"> <div style=" background-color: #ff8e32; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div5 violet"> <div style=" background-color: #5c5d9d; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div6 yellow"> <div style=" background-color: #f0e30e; transform: translate(0.1rem, 0.11rem); " ></div> </div> </div> <!-- 云 --> <div class="xwf_cloud p-r"> <div class="p-a left"></div> <div class="p-a right"></div> </div> </div> </div> <div class="congratulatory2 w750 hidden"> <div class="select p-r"> <!-- 牛 --> <div class="select_niu p-a"> <img src="./img/two_show.png" alt="" /> </div> <!-- 上一步下一步 --> <div> <div class="confirm p-a prev"> <span>上一步</span> </div> <div class="confirm p-a next"> <span>下一步</span> </div> </div> <!-- 颜色 --> <div class="select_color p-a d-flex"> <div class="div div1"> <div style=" background-color: #4875cf; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div2"> <div style=" background-color: #f4f4f4; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div3"> <div style=" background-color: #fdf1b3; transform: translate(0.1rem, 0.11rem); " ></div> </div> </div> <!-- 云 --> <div class="xwf_cloud p-r"> <div class="p-a left"></div> <div class="p-a right"></div> </div> </div> </div> <div class="congratulatory3 w750 p-r hidden"> <div class="select"> <!-- 牛 --> <div class="select_niu p-a"> <img src="./img/three_show.png" alt="" /> </div> <!-- 上一步下一步 --> <div> <div class="confirm p-a prev"> <span>上一步</span> </div> <div class="confirm p-a next"> <span>下一步</span> </div> </div> <!-- 颜色 --> <div class="select_color p-a d-flex"> <div class="div div1"> <div style=" background-color: #4875cf; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div2"> <div style=" background-color: #f4f4f4; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div3"> <div style=" background-color: #fdf1b3; transform: translate(0.1rem, 0.11rem); " ></div> </div> </div> <!-- 云 --> <div class="xwf_cloud p-r"> <div class="p-a left"></div> <div class="p-a right"></div> </div> </div> </div> <div class="congratulatory4 w750 hidden"> <div class="select p-r"> <!-- 牛 --> <div class="p-r"> <img src="./img/four_show.png" alt="" class="p-a" /> <div class="select_niu p-a p-r"> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> <img class="p-a hidden" src="./img/niu_bg.png" /> </div> </div> <!-- 上一步下一步 --> <div> <div class="confirm p-a prev"> <span>上一步</span> </div> <div class="confirm p-a next"> <span>下一步</span> </div> </div> <!-- 颜色 --> <div class="select_color p-a d-flex flex-wrap" style="width: 6rem"> <div class="div div1 mb10 blur"> <div style=" background-color: #433ff4; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div2 green"> <div style=" background-color: #6cc049; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div3 orange"> <div style=" background-color: #ff6a00; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div4 pink"> <div style=" background-color: #e74582; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div5 red"> <div style=" background-color: #e2231a; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div6 violet"> <div style=" background-color: #aa0adf; transform: translate(0.1rem, 0.11rem); " ></div> </div> </div> <!-- 云 --> <div class="xwf_cloud p-r"> <div class="p-a left"></div> <div class="p-a right"></div> </div> </div> </div> <div class="congratulatory5 w750 p-r hidden"> <div class="select"> <!-- 牛 --> <div class="select_niu p-a"> <img src="./img/five_show.png" alt="" /> </div> <!-- 上一步下一步 --> <div> <div class="confirm p-a prev"> <span>上一步</span> </div> <div class="confirm p-a next"> <span>下一步</span> </div> </div> <!-- 颜色 --> <div class="select_color p-a d-flex"> <div class="div div1"> <div style=" background-color: #4875cf; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div2"> <div style=" background-color: #f4f4f4; transform: translate(0.1rem, 0.11rem); " ></div> </div> <div class="div div3"> <div style=" background-color: #fdf1b3; transform: translate(0.1rem, 0.11rem); " ></div> </div> </div> <!-- 云 --> <div class="xwf_cloud p-r"> <div class="p-a left"></div> <div class="p-a right"></div> </div> </div> </div> <div class="html2Image p-f" style=" background-color: rgba(0, 0, 0, 0.5); z-index: 13; width: 100%; height: 100%; " > <div style="margin: 1.3rem 0 0 0.8rem"> <img id="html2Image" src="" alt="" style="width: 90%; height: 90%" /> </div> <button class="btn" style=" position: absolute; top: 0.7rem; right: 0.3rem; color: #fff; background-color: rgba(0, 0, 0, 0.2); width: 1.2rem; " > × </button> </div> <div class="preview1 w750 hidden" id="view1"> <div class="select p-r"> <div class="preview_text"><img src="" alt="" /></div> <div class="preview_url"> <img src="" alt="" class="p-a" /> </div> <div class="p-a" style="top: 11.5rem"> <button class="no">返回</button> <button class="ok">确认生成</button> </div> <img src="./img/ewm.png" alt="" class="ewm p-a hidden" /> </div> </div> <div class="preview2 preview w750 hidden" id="view2"> <div class="select p-r"> <div class="preview_text"> <img src="" alt="" /> </div> <div class="preview_url"><img src="" alt="" class="p-a" /></div> <div class="p-a" style="top: 11.5rem"> <button class="no">返回</button> <button class="ok">确认生成</button> </div> <img src="./img/ewm.png" alt="" class="ewm p-a" /> </div> </div> <div class="preview3 preview w750 hidden" id="view3"> <div class="select p-r"> <div class="preview_text"><img src="" alt="" /></div> <div class="preview_url"><img src="" alt="" class="p-a" /></div> <div class="p-a" style="top: 11.5rem"> <button class="no">返回</button> <button class="ok">确认生成</button> </div> <img src="./img/ewm.png" alt="" class="ewm p-a" /> </div> </div> <div class="preview4 preview w750 hidden" id="view4"> <div class="select p-r"> <img class="p-a" src="./img/preview4_bottom.png" alt="" style="width: 7.5rem; bottom: -2rem; left: 0.5rem" /> <div class="preview_text"><img src="" alt="" /></div> <div class="preview_url p-a" style="top: 4.5rem; transform: scale(2.5)" > <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> </div> <div class="p-a" style="top: 11.5rem"> <button class="no">返回</button> <button class="ok">确认生成</button> </div> <img src="./img/ewm.png" alt="" class="ewm p-a" /> </div> </div> <div class="preview5 preview w750 hidden" id="view5"> <div class="select p-r"> <div class="preview_text"> <img src="" alt="" /> </div> <div class="preview_url p-a" style="top: 6rem; left: 1.5rem; transform: scale(1.5)" > <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> <img src="" alt="" class="p-a" /> </div> <div class="p-a" style="top: 11.5rem"> <button class="no">返回</button> <button class="ok">确认生成</button> </div> <img src="./img/ewm.png" alt="" class="ewm p-a" /> </div> </div> <!-- 提示 --> <div class="tit hidden p-f" style=" bottom: 6rem; left: 2rem; width: 3rem; height: 1rem; background-color: #909090; border-radius: 1rem; text-align: center; line-height: 1rem; color: #fff; " > 请选择颜色 </div> </div> <audio id="media" class="musicControl-active" src="1.mp3" loop="loop" ></audio> <img id="music-icon" class="musicControl-active" src="music.png" alt="" style="position: relative; top: -15rem; left: 0" /> <style> .musicControl-active { animation: rotataZ 1.2s linear infinite; -webkit-animation: rotataZ 1.2s linear infinite; } @keyframes rotataZ { 0% { transform: rotateZ(0); } 50% { transform: rotateZ(180deg); } 100% { transform: rotateZ(360deg); } } @-webkit-keyframes rotataZ { 0% { transform: rotateZ(0); } 50% { transform: rotateZ(180deg); } 100% { transform: rotateZ(360deg); } } </style> <script src="./js/jquery-3.4.1.min.js"></script> <script src="./js/html2canvas.min.js"></script> <script src="./js/siper.min.js"></script> <script> var swiper = new Swiper(".swiper-container", { direction: "vertical", slidesPerView: "auto", mousewheel: true, freeMode: true, observer: true, //修改swiper自己或子元素时,自动初始化swiper observeParents: true, //修改swiper的父元素时,自动初始化swiper observeSlideChildren: true, }); $(function () { let arr = ["blur", "cyan", "green", "orange", "violet", "yellow"]; let ax = []; let activeText = ""; let arr1 = ["blur", "green", "orange", "pink", "red", "violet"]; let textIndex = []; let imgUrl = ""; let imgUrl1 = []; /* 公共 */ /* 鼠标滑动 */ $(".index").bind("touchstart", function (e) { (startX = e.originalEvent.changedTouches[0].pageX), (startY = e.originalEvent.changedTouches[0].pageY); }); $(".index").bind("touchmove", function (e) { //获取滑动屏幕时的X,Y (endX = e.originalEvent.changedTouches[0].pageX), (endY = e.originalEvent.changedTouches[0].pageY); //获取滑动距离 distanceX = endX - startX; distanceY = endY - startY; //判断滑动方向 if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -50) { $(".index").addClass("hidden"); $(".box").removeClass("hidden").addClass("visit"); } }); // 旋转切换 function pointer(d, j) { $(".pointer").css("transform", "rotate(" + d + "deg)"); $(".pointer").css("transition", "0.2s all"); $(".box .confirm").click((e) => { e.stopPropagation(); $(".box").addClass("hidden"); $(".congratulatory" + j + "") .removeClass("hidden") .siblings() .addClass("hidden"); }); } // 切换类名换页面 function toggleShow(a) { $(".congratulatory" + a + " .next").click((e) => { e.stopPropagation(); $(".congratulatory" + a + "") .addClass("hidden") .siblings() .removeClass("hidden"); $(".congratulatory") .removeClass("hidden") .siblings() .addClass("hidden"); $(".congratulatory .prev").click((e) => { e.stopPropagation(); $(".congratulatory") .addClass("hidden") .siblings() .removeClass("hidden"); $(".congratulatory" + a + "") .removeClass("hidden") .siblings() .addClass("hidden"); }); }); } // 切换颜色 function toggleColor(i, number, color) { $(".congratulatory" + i + " .select_niu img").attr( "src", "./img/" + number + "_show_" + color + ".png" ); imgUrl = "./img/" + number + "_show_" + color + ".png"; } function previewBox(b, n) { $(".congratulatory .next").click((e) => { e.stopPropagation(); $(".preview" + b + " .preview_text img").attr( "src", "./img/" + n + "_text1.png" ); $(".ewm").addClass("hidden"); $(".congratulatory").addClass("hidden"); $(".preview" + b + "") .removeClass("hidden") .siblings() .addClass("hidden"); $.each(textIndex, (index) => { $(".preview" + b + " .preview_text img").attr( "src", "./img/" + n + "_text" + (textIndex[index] + 1) + ".png" ); }); $(".preview" + b + " .preview_url img").attr("src", imgUrl); $(".preview" + b + " .ok").click((r) => { e.stopPropagation(); $(".ewm").removeClass("hidden"); $(".preview" + b + " button").addClass("hidden"); $(".html2Image").removeClass("hidden"); html2canvas(document.getElementById("view" + b + "")).then( function (canvas) { var dataUrl = canvas.toDataURL(); $("#html2Image").attr("src", dataUrl); } ); }); $(".preview" + b + " .no").click((e) => { e.stopPropagation(); $(".preview" + b + "").addClass("hidden"); $(".congratulatory").removeClass("hidden"); }); $(".btn").click(() => { $(".html2Image").addClass("hidden"); $(".preview" + b + "").removeClass("hidden"); $(".ewm").addClass("hidden"); $(".preview" + b + " button").removeClass("hidden"); }); }); } function previewBox1(c, f) { $(".congratulatory .next").click(function () { $(".congratulatory").addClass("hidden"); $(".preview" + c + "") .removeClass("hidden") .siblings() .addClass("hidden"); $(".ewm").addClass("hidden"); $.each($(".preview" + c + " .preview_url img"), function (idx) { $(this).attr("src", imgUrl1[idx]); }); $.each(textIndex, (index) => { $(".preview" + c + " .preview_text img").attr( "src", "./img/" + f + "_text" + (textIndex[index] + 1) + ".png" ); }); $(".preview" + c + " .ok").click(function () { $(".ewm").removeClass("hidden"); $(".preview" + c + " button").addClass("hidden"); $(".html2Image").removeClass("hidden"); html2canvas(document.getElementById("view" + c + "")).then( function (canvas) { var dataUrl = canvas.toDataURL(); $("#html2Image").attr("src", dataUrl); } ); }); $(".preview" + c + " .no").click(function () { $(".preview" + c + "").addClass("hidden"); $(".congratulatory").removeClass("hidden"); }); $(".btn").click(function () { $(".html2Image").addClass("hidden"); $(".preview" + c + "").removeClass("hidden"); $(".ewm").addClass("hidden"); $(".preview" + c + " button").removeClass("hidden"); }); }); } // 第二块 $(".box .turntable div").click(function () { $(".box .select_niu img").hide().eq($(this).index()).show(); }); $(".box .confirm").click((e) => { e.stopPropagation(); $(".box").addClass("hidden"); $(".congratulatory3") .removeClass("hidden") .siblings() .addClass("hidden"); }); $(".one").click((e) => { e.stopPropagation(); pointer(-80, "1"); }); $(".two").click((e) => { e.stopPropagation(); pointer(-45, "2"); }); $(".three").click((e) => { e.stopPropagation(); pointer(0, "3"); }); $(".four").click((e) => { e.stopPropagation(); pointer(55, "4"); }); $(".five").click((e) => { e.stopPropagation(); pointer(80, "5"); }); // 第三块 $(".congratulatory1 .div").click(function () { $(this).addClass("active").siblings().removeClass("active"); }); $(".congratulatory1 .select_niu img").removeClass("hidden"); $(".congratulatory1 .next").click(function () { let index = $(".congratulatory1 .div.active").index(); if ($(".congratulatory1 .select_color .div").hasClass("active")) { $(".congratulatory1 .select_color .div").removeClass("active"); ax.push($(".congratulatory1 .select_color .active").index()); if (arr[index] == undefined) { console.log(1); } else { if (imgUrl1.length < 9) { imgUrl1.push( "./img/one_show_" + arr[index] + ax.length + ".png" ); var new_arr = []; for (var i = 0; i < imgUrl1.length; i++) { var items = imgUrl1[i]; //判断元素是否存在于new_arr中,如果不存在则插入到new_ar中 if ($.inArray(items, new_arr) == -1) { new_arr.push(items); } } } } if (ax.length >= 9) { $(".congratulatory1").addClass("hidden"); $(".congratulatory").removeClass("hidden"); ax.pop(); } previewBox1(4, "one"); $(".congratulatory .prev").click((e) => { e.stopPropagation(); $(".congratulatory").addClass("hidden"); $(".congratulatory1").removeClass("hidden"); }); } else { $(".tit").removeClass("hidden"); setTimeout(() => { $(".tit").addClass("hidden"); }, 1000); } }); $.each(arr, (q) => { $(".congratulatory1 .select_color ." + arr[q] + "").click( function () { $(".congratulatory1 .select_niu img") .eq(ax.length + 1) .attr( "src", "./img/one_show_" + arr[q] + "" + (ax.length + 1) + ".png" ); } ); }); $(".congratulatory1 .prev").click(function () { if ( $(".congratulatory1 .select_niu img") .eq(ax.length + 1) .attr("src", "./img/niu_bg.png") ) { ax.pop(); imgUrl1.pop(); console.log(ax); } else { $(".congratulatory1 .select_niu img") .eq(ax.length + 2) .attr("src", "./img/niu_bg.png"); } let imgUr = $(".congratulatory1 .select_niu img").eq(1).attr("src"); if (imgUr == "./img/niu_bg.png") { $(".congratulatory1").addClass("hidden"); $(".box").removeClass("hidden"); } }); $(".swiper-slide").eq(0).addClass("active"); $(".swiper-slide").click(function () { textIndex.push($(this).index()); $(this).addClass("active").siblings().removeClass("active"); }); $(".congratulatory2 .prev").click(function () { $(".congratulatory2").addClass("hidden"); $(".box").removeClass("hidden"); }); $(".congratulatory2 .next").click(function () { if ($(".congratulatory2 .div").hasClass("active")) { console.log(1); } else { $(".tit").removeClass("hidden"); setTimeout(() => { $(".tit").addClass("hidden"); }, 1000); } }); $(".congratulatory2 .div").click(function () { $(this).addClass("active").siblings().removeClass("active"); }); $(".congratulatory2 .div1").click(function () { toggleColor("2", "two", "blur"); toggleShow("2"); previewBox(1, "two"); }); $(".congratulatory2 .div2").click(function () { toggleColor("2", "two", "silver"); toggleShow("2"); previewBox(1, "two"); }); $(".congratulatory2 .div3").click(function () { toggleColor("2", "two", "gilding"); toggleShow("2"); previewBox(1, "two"); }); $(".congratulatory3 .next").click(function () { if ($(".congratulatory3 .div").hasClass("active")) { console.log(1); } else { $(".tit").removeClass("hidden"); setTimeout(() => { $(".tit").addClass("hidden"); }, 1000); } }); $(".congratulatory3 .div").click(function () { $(this).addClass("active").siblings().removeClass("active"); }); $(".congratulatory3 .prev").click(function () { $(".congratulatory3").addClass("hidden"); $(".box").removeClass("hidden"); }); $(".congratulatory3 .div1").click(function () { toggleColor("3", "three", "blur"); toggleShow("3"); previewBox(2, "three"); }); $(".congratulatory3 .div2").click(function () { toggleColor("3", "three", "silver"); toggleShow("3"); previewBox(2, "three"); }); $(".congratulatory3 .div3").click(function () { toggleColor("3", "three", "gilding"); toggleShow("3"); previewBox(2, "three"); }); // // 第三块 $(".congratulatory4 .div").click(function () { $(this).addClass("active").siblings().removeClass("active"); $(".tit").addClass("hidden"); }); $(".congratulatory4 .select_niu img").removeClass("hidden"); $(".congratulatory4 .next").click(function () { let index = $(".congratulatory4 .div.active").index(); if ($(".congratulatory4 .select_color div").hasClass("active")) { ax.push($(".congratulatory4 .select_color .active").index()); $(".congratulatory4 .select_color div").removeClass("active"); console.log(ax); } else { $(".tit").removeClass("hidden"); } if (ax.length == 9) { let index = $(".congratulatory4 .div.active").index(); $(".congratulatory4").addClass("hidden"); $(".congratulatory").removeClass("hidden"); } imgUrl1.push("./img/four_show_" + arr1[index] + ax.length + ".png"); previewBox1(5, "four"); $(".congratulatory .prev").click(function () { $(".congratulatory").addClass("hidden"); $(".congratulatory4").removeClass("hidden"); }); }); $.each(arr1, function (m) { $(".congratulatory4 .select_color ." + arr1[m] + "").click( function () { $(".congratulatory4 .select_niu img") .eq(ax.length + 1) .attr( "src", "./img/four_show_" + arr1[m] + "" + (ax.length + 1) + ".png" ); } ); }); $(".congratulatory4 .prev").click(function () { if ( $(".congratulatory4 .select_niu img") .eq(ax.length + 1) .attr("src", "./img/niu_bg.png") ) { ax.pop(); } else { $(".congratulatory4 .select_niu img") .eq(ax.length + 2) .attr("src", "./img/niu_bg.png"); } let imgUr = $(".congratulatory4 .select_niu img").eq(1).attr("src"); if (imgUr == "./img/niu_bg.png") { $(".congratulatory4").addClass("hidden"); $(".box").removeClass("hidden"); } }); $(".congratulatory5 .next").click(function () { if ($(".congratulatory5 .div").hasClass("active")) { console.log(1); } else { $(".tit").removeClass("hidden"); setTimeout(() => { $(".tit").addClass("hidden"); }, 1000); } }); $(".congratulatory5 .div").click(function () { $(this).addClass("active").siblings().removeClass("active"); }); $(".congratulatory5 .prev").click(function () { $(".congratulatory5").addClass("hidden"); $(".box").removeClass("hidden"); }); $(".congratulatory5 .div1").click(function () { toggleColor("5", "five", "blur"); toggleShow("5"); previewBox(3, "five"); }); $(".congratulatory5 .div2").click(function () { toggleColor("5", "five", "silver"); toggleShow("5"); previewBox(3, "five"); }); $(".congratulatory5 .div3").click(function () { toggleColor("5", "five", "gilding"); toggleShow("5"); previewBox(3, "five"); }); }); </script> <script type="text/javascript"> var dataForWeixin = { appId: "<%=appid%>", MsgImg: "http://lx26.sunnyby.cn/2021-4-8/slt.jpg", TLImg: "http://lx26.sunnyby.cn/2021-4-8/slt.jpg", url: "http://lx26.sunnyby.cn/2021-4-8/index.aspx", title: "春节", // 分享后的标题, desc: "春节牛", // 分享后的描述信息 timestamp: "<%=timestamp%>", nonceStr: "<%=nonceStr%>", signature: "<%=signature%>", jsApiList: [ "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", ], fakeid: "", callback: function () {}, }; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: dataForWeixin.appId, // 必填,公众号的唯一标识 timestamp: dataForWeixin.timestamp, // 必填,生成签名的时间戳 nonceStr: dataForWeixin.nonceStr, // 必填,生成签名的随机串 signature: dataForWeixin.signature, // 必填,签名,见附录1 jsApiList: dataForWeixin.jsApiList, // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); wx.ready(function () { //在此输入各种API //分享到朋友圈 wx.onMenuShareTimeline({ title: dataForWeixin.title, // 分享标题 link: dataForWeixin.url, // 分享链接 desc: dataForWeixin.desc, // 分享描述 imgUrl: dataForWeixin.MsgImg, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 }, }); //分享给朋友 wx.onMenuShareAppMessage({ title: dataForWeixin.title, // 分享标题 desc: dataForWeixin.desc, // 分享描述 link: dataForWeixin.url, // 分享链接 imgUrl: dataForWeixin.TLImg, // 分享图标 type: "", // 分享类型,music、video或link,不填默认为link dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 }, }); //QQ wx.onMenuShareQQ({ title: dataForWeixin.title, // 分享标题 desc: dataForWeixin.desc, // 分享描述 link: dataForWeixin.url, // 分享链接 imgUrl: dataForWeixin.MsgImg, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 }, }); //QQ微博 wx.onMenuShareWeibo({ title: dataForWeixin.title, // 分享标题 desc: dataForWeixin.desc, // 分享描述 link: dataForWeixin.url, // 分享链接 imgUrl: dataForWeixin.TLImg, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 }, }); // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作, //所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 }); wx.error(function (res) { //alert(res); // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 }); </script> <script> // 背景音乐 $(function () { var Hmedia = document.getElementById("media"); // Hmedia.play(); document.addEventListener( "WeixinJSBridgeReady", function () { Hmedia.load(); Hmedia.play(); Hmedia.loop = false; }, false ); //循环播放 Hmedia.onended = function () { Hmedia.load(); Hmedia.play(); }; wx.error(function (res) { //alert(res.errMsg); }); //music icon $("#music-icon").click(function () { var _this = $(this); if (_this.hasClass("musicControl-active")) { _this.removeClass("musicControl-active"); // Hmedia.load(); Hmedia.pause(); } else { _this.addClass("musicControl-active"); Hmedia.load(); Hmedia.play(); } }); }); </script> </body> </html>
标签:function,img,removeClass,春节,小游戏,hidden,h5,click,addClass 来源: https://www.cnblogs.com/xiewangfei123/p/14654533.html