html5移动端手机微信抢红包雨代码资源-CSDN下载

共8个文件

png：3个

css：2个

js：1个

html5

4星 · 超过85%的资源需积分: 50 127 浏览量 2017-11-01 16:10:02 上传评论 5 收藏 224KB ZIP 举报

HTML5移动端手机微信抢红包雨代码是利用现代Web技术实现的一种互动效果，它模拟了现实中红包雨的场景，用户可以通过点击屏幕上的红包来参与抢红包活动。这种效果常见于线上活动、节日庆祝或者品牌推广中，能提升用户体验，增强互动性。 `index.html`是网页的主文件，它包含了页面的基本结构和引用资源。在`<head>`部分，通常会引入`css`和`js`文件，这两个文件分别用于定义样式和实现动态功能。`<body>`部分则包含实际展示的元素，如红包雨的容器和用户交互的界面元素。 `images`文件夹存放的是与红包雨效果相关的图片资源，可能包括红包的图片、背景图或其他视觉元素。这些图片通过CSS或者JavaScript被应用到页面上，以形成动态的视觉效果。 `js`文件夹中的JavaScript代码是整个红包雨功能的核心。JavaScript可以操作DOM（文档对象模型）来创建、修改和控制网页上的元素。在这个案例中，JavaScript可能会创建多个红包元素，设置它们的初始位置、速度和动画效果，然后通过定时器让红包从顶部随机位置下落。当用户点击红包时，JavaScript会处理点击事件，判断是否抢到红包，以及红包的状态（如已领完或未开启）。 `css`文件夹中的CSS（层叠样式表）用于定义元素的外观和布局。在红包雨效果中，CSS可以设定红包的大小、颜色、透明度变化等视觉效果。通过CSS3的动画和过渡属性，可以实现红包下落过程中的平滑变换，比如渐变、缩放和旋转等效果，使整个画面更加生动。此外，考虑到在移动端，尤其是微信环境中运行，开发者可能还需要考虑触屏事件的适配，如`touchstart`、`touchmove`和`touchend`，以确保在手机和平板上用户也能顺畅地参与抢红包。同时，为了兼容不同浏览器和设备，代码中可能还会运用到HTML5的离线存储、媒体查询、响应式设计等技术，确保在各种环境下都能正常工作。实现HTML5移动端手机微信抢红包雨代码，需要综合运用HTML、CSS和JavaScript的知识，以及对移动端适配和交互设计的理解。这样的项目不仅可以锻炼开发者的技术能力，还能提升其创新和用户体验设计的意识。

资源推荐

资源详情

资源评论

收起资源包目录

html5移动端手机微信抢红包雨代码.zip （8个子文件）

index.html 6KB

images

gx.png 131KB

hb_1.png 5KB

hb_2.png 5KB

bj.jpg 69KB

jquery.min.js 90KB

css

demo.css 1KB

sweet-alert.css 15KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5移动端手机微信抢红包雨代码</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">  <meta content="telephone=no" name="format-detection" />  <meta content="yes" name="apple-mobile-web-app-capable">  <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="css/demo.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/sweet-alert.css"> <style type="text/css"> body { margin: 0; padding: 0; position: relative; background-position: center; width: 100%; height: 100%; overflow-y: hidden; background:url(images/bj.jpg) no-repeat top left ; background-size: 100%; } .couten { width: 100%; height: 100%; overflow: hidden; overflow-y: hidden; } .couten li { position: absolute; animation: all 3s linear; top:-100px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .couten li a{ display: block; } .mo { position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); z-index: 100; display: none; } .mo .sen { width: 70%; height: 150px; border-radius: 5px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .mo .sen img { width: 60%; height: 127px; position: absolute; top: 0px; left: 0; right: 0; bottom: 212px; margin: auto; vertical-align: top; } .mo .sen h3 { width: 50%; height: 30px; position: absolute; top: -35px; left: 0; right: 0; bottom: 0; margin: auto; text-align: center; color: red; font-size: 140%; font-weight: bold; z-index: 999; } .mo .sen a { width: 26%; height: 50px; background-color: rgb(174, 222, 244); box-shadow: rgba(174, 222, 244, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset; position: absolute; top: 100px; left: 0; right: 0; bottom: 0; margin: auto; color: #fff; border-radius: 5px; text-align: center; line-height: 50px; text-decoration: none; } .backward{ width: 100%; background:#ccc; opacity: 0.5; position: absolute; top: 0; } .backward span{ display: inline-block; width: 100px; height: 100px; color: #000; font-weight: bold; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; text-align: center; line-height: 100px; font-size: 1000%; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var win = (parseInt($(".couten").css("width"))) - 60; $(".mo").css("height", $(document).height()); $(".couten").css("height", $(document).height()); $(".backward").css("height", $(document).height()); $("li").css({}); // 点击确认的时候关闭模态层 $(".sen a").click(function(){ $(".mo").css("display", "none") }); var del = function(){ nums++; // console.info(nums); // console.log($(".li" + nums).css("left")); $(".li" + nums).remove(); setTimeout(del,200) } var add = function() { var hb = parseInt(Math.random() * (3 - 1) + 1); var Wh = parseInt(Math.random() * (70 - 30) + 20); var Left = parseInt(Math.random() * (win - 0) + 0); var rot = (parseInt(Math.random() * (45 - (-45)) - 45)) + "deg"; // console.log(rot) num++; $(".couten").append("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png'></a></li>"); $(".li" + num).css({ "left": Left, }); $(".li" + num + " a img").css({ "width": Wh, "transform": "rotate(" + rot + ")", "-webkit-transform": "rotate(" + rot + ")", "-ms-transform": "rotate(" + rot + ")", /* Internet Explorer */ "-moz-transform": "rotate(" + rot + ")", /* Firefox */ "-webkit-transform": "rotate(" + rot + ")",/* Safari 和 Chrome */ "-o-transform": "rotate(" + rot + ")" /* Opera */ }); $(".li" + num).animate({'top':$(window).height()+20},5000,function(){ //删掉已经显示的红包 this.remove() }); //点击红包的时候弹出模态层 $(".li" + num).click(function(){ $(".mo").css("display", "block") }); setTimeout(add,200) } //增加红包 var num = 0; setTimeout(add,3000); //倒数计时 var backward = function(){ numz--; if(numz>0){ $(".backward span").html(numz); }else{ $(".backward").remove(); } setTimeout(backward,1000) } var numz = 4; backward(); }) </script> </head> <body> <ul class="couten">  </ul> <div class="mo"> <div class="sen"> <img src="images/gx.png"> <h3>获得红包3元</h3> <a href="#">确定</a> </div> </div> <div class="backward"> <span></span> </div> </body> </html>

评论收藏

内容反馈