前端JS特效第46集:js-实现响应式节庆活动砸金蛋效果

js-实现响应式节庆活动砸金蛋效果,先来看看效果:

部分核心的代码如下(全部代码在文章末尾):

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>响应式节庆活动砸金蛋效果js特效代码</title><meta name="description" content="响应式节庆活动砸金蛋效果js特效代码。" /> <meta name="keywords" content="响应式,节庆活动,砸金蛋,js特效,特效代码" /><meta name="author" content="js代码" /><meta name="Copyright" content="js代码" /><meta http-equiv="X-UA-Compatible" content="edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/main_response.css">
</head>
<body><!-- <div class="bg-mask"></div><div class="chouJiang"><p class="chouJiangTishi">请稍等...</p><img class="caiDai" src="images/caidai.png" alt="彩带"><img class="imgDan" src="images/egg.png" alt="砸蛋" title="砸蛋"><img class="imgChuiZi" src="images/chuizi.png" alt="锤子"></div> --><!-- <div class="jiangPinResult"><img class="gongxi" src="images/gx.png" alt="恭喜你" title="恭喜"><p>获得500元现金</p><img class="imgJiangPin" src="images/jiangpin.png" alt="奖品" title="奖品"><a href="https://www.hmyd.com/"><input class="btn_Get" value="领取奖品" type="button"></a><img class="colseJiangPin" src="images/close.png" alt="关闭" title="关闭"></div> --><!-- <div class="inputInfo active"><img class="colseLogin" src="images/close.png" alt="关闭"><p class="inputInfoTitle">输入用户信息</p><div class="userNameDiv"><label for="nameInput">用户名:</label><input class="nameInput" name="nameInput" id="nameInput" type="text" placeholder="请输入电话号码"></div><div class="phoneDiv"><label for="phoneInput">手机号:</label><input class="phoneInput" name="phoneInput" id="phoneInput" type="text" placeholder="请输入电话号码"></div><input class="submitTijiao" type="button" value="提交"></div> --><div class="loadingDiv" id="loadingDiv"><p class="wiatTitle">请稍等...</p><img src="images/logo.png" alt="砸金蛋"></div><div class="goldContent"><div class="headPage"><img class="headPage_Img" src="images/indexPageImg.jpg" alt="砸金蛋" title="砸金蛋"></div><div class="goldEggsDiv"><p class="tishiChouJiang">您好,请<span class="loginSpan">登录</span></p><img class="centerPage_Img" src="images/indexPageImg2.jpg" alt="砸金蛋" title="砸金蛋"><div class="list_EggsDiv"  id="carousel"><div><ul class="jinDanUl" id="jinDanUl1"><li><img src="images/egg.png" alt="egg1" title="快来砸我呀!"/></li><li><img src="images/egg.png" alt="egg2" title="快来砸我呀!"/></li><li><img src="images/egg.png" alt="egg3" title="快来砸我呀!"/></li></ul>	</div><div><ul class="jinDanUl1" id="jinDanUl2"><li><img src="images/egg.png" alt="egg4" title="快来砸我呀!"/></li><li><img src="images/egg.png" alt="egg5" title="快来砸我呀!"/></li><li><img src="images/egg.png" alt="egg6" title="快来砸我呀!"/></li></ul>	</div></div><!-- 	<div class="brandStoreLeft slider"><div style="z-index: 0; left: 0px;"><img src="images/2.jpg"></div><div style="left: 313px; z-index: 0;"><img src="images/1.jpg"></div></div> --></div><div class="paiMingAllDiv list_Content"><div class="titleDiv"><div class="title_Div"><h3>金蛋榜单</h3></div><span class="line_1px"></span></div><div class="contentDiv"><div class="insert_Span"></div><div class="list_PaiMing"><div class="list_Div"><div class="list_Title"><span class="list_Time">时间</span><span class="list_Name">用户名</span><span class="list_Things">金蛋大奖</span></div><div class="bg_Dashed"></div><div class="all_List_Div"><ul class="ul_List1"><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元红包大奖</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">100元小惠钱包</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">1000积分</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元现金红包</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元红包大奖</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">100元小惠钱包</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">1000积分</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元现金红包</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元红包大奖</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">100元小惠钱包</span></li></ul><ul class="ul_List2"><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元红包大奖</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">100元小惠钱包</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">1000积分</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元现金红包</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元红包大奖</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">100元小惠钱包</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">1000积分</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元现金红包</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">500元红包大奖</span></li><li><span class="span_dateTime">15:00</span><span class="span_userNme">daiwei</span><span class="span_userWingName">100元小惠钱包</span></li></ul></div></div></div></div></div><div class="rulesActivity list_Content"><div class="titleDiv"><div class="title_Div"><h3>活动细则</h3></div><span class="line_1px"></span></div><div class="list_Rules"><i class="right_img"></i><i class="left_img"></i><ul><li>1.所有实名的女性会员,3月8日活动当天,免费获得8次砸金蛋机会,超过免费次数,<span class="color_red">按50积分/砸</span>扣除积分获取抽奖机会;</li><li>2.奖项设置:现金券、小惠钱包和积分等,奖池内大奖含有现金券500元、小惠钱包100元、1000积分等;</li><li>3.奖品为实时发放,请会员自行前往个人中心查看获取奖品;</li><li>4.客服免费咨询热线:123456789、邮箱:185098535@qq.com(工作日:09:00-17:30);</li><li>5.本活动最终解释权归Ifmisswqq所有。</li></ul></div></div><div class="footerImg"><img src="images/bottom.png" alt="砸金蛋活动"></div></div>
</body>
<script  data-main="js/do_main.js" src="js/jquery-2.1.0.min.js"></script>
<script src="js/require.js"></script>
<script>var dis = 0;function autoWinsList(){dis++;$('.all_List_Div').scrollTop(dis);if ($('.all_List_Div').scrollTop()>=$('.ul_List1').height()) {dis = 0;$('.all_List_Div').scrollTop(dis);}}var myset=setInterval("autoWinsList()",50);
</script>
<script type="text/javascript">
//加载loading效果
// document.onreadystatechange=function completeLoading(){
// 	var tishi = document.getElementById('loadingDiv');
//   	if (document.readyState=='complete') {
//   		tishi.hide();
// 	}
// }
</script>
</html>

全部代码:js-实现响应式节庆活动砸金蛋效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3250260.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

redis持久化RDB(仅供自己参考)

&#xff08;1&#xff09;save命令&#xff1a;是直接占用主线程来执行持久化的&#xff08;因为redis是单线程的&#xff0c;如果执行save命令&#xff0c;则其他命令&#xff0c;无论查询还是怎么的都被阻塞了&#xff09; &#xff08;2&#xff09;bgsave命令&#xff1a…

从安装Node到TypeScript到VsCode的配置教程

从安装Node到TypeScript到VsCode的配置教程 1.下载Node安装包&#xff0c; 链接 2.双击安装包&#xff0c;选择安装路径&#xff0c;如下&#xff1a; 3.一直点击下一步&#xff0c;直至安装结束即可&#xff1a; 这个时候&#xff0c;node会默认配置好环境变量&#xff0c;并且…

《基于 Kafka + Quartz 实现时限质控方案》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

OpenCv 如何在 Java 中使用

Java 项目引入 OpenCv 环境准备OpenCv介绍下载Maven 安装动态链接库 完成 环境准备 JDK 8 OpenCv 4.0.0 Maven 3.9 Windows 11 OpenCv 介绍 OpenCV&#xff08;开源计算机视觉库&#xff09;是一个功能强大的计算机视觉和机器学习库。它提供了广泛的工具和算法&#xff0c;用…

jquery实现文字点选验证码

jquery实现文字点选验证码 git地址&#xff1a;点击获取源码 一、功能说明&#xff08;文字点选验证码&#xff09; 词组库内存在大量3~6字随机词组&#xff0c;从词组库内随机找出一组词组&#xff0c;随机展现在显示区点击按钮&#xff0c;弹出验证码区域将词组内的随机数量…

4. docker镜像、Dockerfile

docker镜像、Dockerfile 一、docker镜像1、镜像介绍2、镜像核心技术 二、Dockerfile定制镜像1、Dockerfile使用流程1.1 编写Dockerfile1.2、构建镜像1.3 创建容器测试镜像定制操作 2、Dockerfile常用指令 一、docker镜像 1、镜像介绍 分层的文件系统 优势&#xff1a;节省空间…

vue3前端开发-小兔鲜项目-封装一下产品展示模块组件

vue3前端开发-小兔鲜项目-封装一下产品展示模块组件&#xff01;因为这种产品展示信息的模块组件&#xff0c;后面我还会在其他的页面内反复使用到&#xff0c;所以&#xff0c;使用模块化开发的思路&#xff0c;把它单独设计成一个组件&#xff0c;这样可以代码复用。以后在其…

一建备考,五步形成闭环学习!

一建备考从7月份到考前是大部分人焦虑的时候&#xff0c;因为基础阶段结束&#xff0c;开始成套做真题了&#xff0c;第一遍做真题很多人分数都不太理想&#xff0c;很多同学直接失去信心&#xff0c;开始emo&#xff0c;这都是只听课不做题的结果。 现在很多同学都是这种情况…

STM32智能家居电力管理系统教程

目录 引言环境准备智能家居电力管理系统基础代码实现&#xff1a;实现智能家居电力管理系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;电力管理与优化问题解决方案与优化收尾与总结 1. 引言 智能家居电…

【单片机毕业设计选题24072】-基于单片机的智能停车场管理系统

系统功能: 1.根据RFID卡卡号判断新老用户&#xff0c;老用户不计费直接放行&#xff0c;新用户放行时显示计费结果 2.显示屏显示车位剩余数量 3.检测车位有车亮红灯&#xff0c;无车亮绿灯&#xff0c;能够实现车位诱导 5.车辆出停车场时&#xff0c;能根据停车时间计算停车…

【香橙派】Orange pi AIpro开发板使用之普通照片转换为卡通

前言 最近有幸收到一份新款 OrangePi AIpro 开发板&#xff0c;之前手里也捣鼓过一些板子&#xff0c;这次尝试从零开始部署一个简单的后端服务。OrangePi AIpro 采用昇腾AI技术路线&#xff0c;具体为4核64位处理器AI处理器&#xff0c;可配16GB内存容量&#xff0c;各种复杂应…

Facebook Dating:社交平台的约会新体验

随着社交媒体的普及和技术的发展&#xff0c;传统的社交方式正在经历革新&#xff0c;尤其是在约会这个领域。Facebook作为全球领先的社交平台&#xff0c;推出了Facebook Dating&#xff0c;旨在为用户提供一个全新的约会体验。本文将探讨Facebook Dating如何重新定义社交平台…

c语言题目之打印单身狗

文章目录 一、题目二、思路三、代码实现 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、题目 二、思路 第一步 首先这里先了解两个有关于位操作符异或的知识点 &#xff0c;异或操作符的规则是相同为0&#xff0c;相异为1 。 通过上面我们可以得…

双非一本嵌入式方向怎么学?

双非一本&#xff08;非“985”和“211”工程重点建设的本科院校&#xff09;的学生在学习嵌入式方向时&#xff0c;可以通过以下步骤和策略来系统地学习和提升自己。我收集归类了一份嵌入式学习包&#xff0c;对于新手而言简直不要太棒&#xff0c;里面包括了新手各个时期的学…

哈喽GPT-4o,程序员如何通过GPT-4o保护自己的合法权益

目录 一、法律研究Prompt&#xff1a;派遣合同和劳务外包合同有什么区别&#xff1f;详细说一下在被裁员时的区别&#xff1f; 二、法律条文检索Prompt&#xff1a;检索《劳动合同法》&#xff0c;以下情况属于第几条&#xff0c;如果公司进行技能考试&#xff0c;并以技能考试…

嵌入式物联网在医疗行业中的应用——案例分析

作者主页: 知孤云出岫 目录 嵌入式物联网在医疗行业中的应用——案例分析引言1. 智能病房监控1.1 实时患者监控系统 2. 智能医疗设备管理2.1 设备使用跟踪与维护 3. 智能药物管理3.1 药物分配与跟踪 4. 智能远程医疗4.1 远程患者监控与诊断 总结 嵌入式物联网在医疗行业中的应…

Rust Result 与可恢复的错误

Result 与可恢复的错误 大部分错误并没有严重到需要程序完全停止执行。有时&#xff0c;一个函数会因为一个容易理解并做出反应的原因失败。例如&#xff0c;如果因为打开一个并不存在的文件而失败&#xff0c;此时我们可能想要创建这个文件&#xff0c;而不是终止进程。 回忆…

3112. 访问消失节点的最少时间 Medium

给你一个二维数组 edges 表示一个 n 个点的无向图&#xff0c;其中 edges[i] [ui, vi, lengthi] 表示节点 ui 和节点 vi 之间有一条需要 lengthi 单位时间通过的无向边。 同时给你一个数组 disappear &#xff0c;其中 disappear[i] 表示节点 i 从图中消失的时间点&#xff0…

华清数据结构day3 24-7-18

基于昨天代码增加增删改查功能 zy.h #ifndef ZY_H #define ZY_H #define MAX 100 //最大容量 //定义学生类型 struct Stu {char name[20];int age;double score; }; //定义班级类型 struct Class {struct Stu student[MAX]; //存放学生的容器int size; //实际…

CH552的bootload程序IAP直接对ROM-flash修改数据(未尝试)

手动写bootload程序的可能 1&#xff0c;根据ch552g的使用手册内容查看到 2&#xff0c;在下面的参考文件的IAP文件夹中看到IAP文件 参考 下面程序中并没有跳转到厂家bootload的过程&#xff0c;这是直接通过控制有关的寄存器对FLSH进行直接写入和修改&#xff0c;这样可以认…