前端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://www.mzph.cn/news/873292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Diffusion【1】:SDSeg——基于Stable Diffusion的单步扩散分割!

文章目录 前言AbstractIntroductionMethodsLatent EstimationConcatenate Latent FusionTrainable Vision Encoder ExperimentDatasets and Evaluation MetricsImplementation DetailsExperimental SettingsInference Stage Main ResultsComparison with State-of-the-ArtsComp…

组队学习——支持向量机

本次学习支持向量机部分数据如下所示 IDmasswidthheightcolor_scorefruit_namekind 其中ID&#xff1a;1-59是对应训练集和验证集的数据&#xff0c;60-67是对应测试集的数据&#xff0c;其中水果类别一共有四类包括apple、lemon、orange、mandarin。要求根据1-59的数据集的自…

数据库连接的艺术:在PyCharm中轻松配置

数据库连接的艺术&#xff1a;在PyCharm中轻松配置 PyCharm&#xff0c;作为业界领先的集成开发环境&#xff08;IDE&#xff09;&#xff0c;提供了强大的数据库工具&#xff0c;支持多种数据库连接和操作。无论是MySQL、PostgreSQL&#xff0c;还是SQLite&#xff0c;PyChar…

在RK3568上如何烧录MAC?

这里我们用RKDevInfoWriteTool 1.1.4版本 下载地址&#xff1a;https://pan.baidu.com/s/1Y5uNhkyn7D_CjdT98GrlWA?pwdhm30 提 取 码&#xff1a;hm30 烧录过程&#xff1a; 1. 解压RKDevInfoWriteTool_Setup_V1.4_210527.7z 进入解压目录&#xff0c;双击运行RKDevInfo…

24暑假算法刷题 | Day16 | LeetCode 513. 找树左下角的值,112. 路径总合,106. 从中序和后序遍历序列构造二叉树

目录 513. 找树左下角的值题目描述题解 112. 路径总合题目描述题解 106. 从中序和后序遍历序列构造二叉树题目描述题解 513. 找树左下角的值 点此跳转题目链接 题目描述 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至…

虚继承(C++)

目录 菱形继承 虚继承 虚继承原理 虚继承使用注意事项&#xff1a; 不要把所有的遗憾都留给未来&#xff0c;趁年轻出去走走&#xff0c; 让我们用心去感受这个世界&#xff0c;用脚步去丈量这个世界的距离。 这里是来自M--Y的专栏&#xff1a;C启&#xff08;&#xff09;航…

SAP ABAP 批导函数(封装版)

EXCEL批导函数相信大家熟悉的不能再熟悉了&#xff0c;但是特殊场景不同函数对工作的影响真的很大。 整理本篇文章是因为公司电脑统一使用了加密系统&#xff0c;通过先前的统一函数无法直接上传&#xff0c;每次都要先另存为TEXT文本后上传&#xff0c;用户体验非常差&#x…

【16】时间单位换算

时间单位换算 题目描述 编写程序&#xff0c;将n秒换算称为x小时&#xff0c;x分钟&#xff0c;x秒。 输入格式 输入一行&#xff0c;一个整数 n n n,表示n秒。 输出格式 输出也为一行&#xff0c;表示为 xH xM xS。 输出输入样例 输入样例 #1 23456输出样例 #1 6H 3…

持续集成01--Git版本管理及基础应用实践

前言 本系列文章旨在深入探讨持续集成/持续部署&#xff08;Continuous Integration/Continuous Deployment, CI/CD&#xff09;流程中的各个环节&#xff0c;而本篇将聚焦于Git版本管理及其基本应用。通过本文&#xff0c;读者将了解到Git的基本原理、安装配置、基本命令以及如…

GuLi商城-商品服务-API-品牌管理-品牌分类关联与级联更新

先配置mybatis分页&#xff1a; 品牌管理增加模糊查询&#xff1a; 品牌管理关联分类&#xff1a; 一个品牌可以有多个分类 一个分类也可以有多个品牌 多对多的关系&#xff0c;用中间表 涉及的类&#xff1a; 方法都比较简单&#xff0c;就不贴代码了

无线物联网新时代,RFID拣货标签跟随潮流

拣选技术的演变历程&#xff0c;本质上是从人力操作向自动化、智能化转型的持续进程。近期&#xff0c;“货寻人”技术成为众多企业热烈追捧的对象&#xff0c;它可以根据企业的特定需求&#xff0c;从众多拣选方案中选出最优解。那么&#xff0c;在采用“货到人”拣选技术时&a…

【python】OpenCV—Scanner

文章目录 1、需求描述2、代码实现3、涉及到的库函数cv2.arcLengthcv2.approxPolyDPskimage.filters.threshold_localimutils.grab_contours 4、完整代码5、参考 1、需求描述 输入图片 扫描得到如下的结果 用OpenCV构建文档扫描仪只需三个简单步骤: 1.边缘检测 2.使用图像中…

VS code配置docker远程连接

一 前置条件 1、本地已安装docker 2、服务端docker已配置Docker配置远程连接 二 VScode安装docker扩展 三 执行docker命令 1、切换到远程docker节点 docker context create remote-docker --docker "hosthttp://192.168.6.9:2375" 2、使用远程节点 docker cont…

智能合约中重放攻击

重放攻击&#xff08;Replay Attack&#xff09; 重放攻击&#xff08;Replay Attack&#xff09;是一种网络安全威胁&#xff0c;它发生在攻击者截获了合法用户与服务之间的有效数据传输&#xff08;如认证令牌、加密消息、交易请求等&#xff09;&#xff0c;然后在稍后的时…

python用selenium网页模拟时xpath无法定位元素解决方法3

有时我们在使用python selenium xpath时&#xff0c;无法定位元素&#xff0c;红字显示no such element。上两篇文章分别写了2种情况&#xff0c;1种是包含iframe的&#xff0c;详见https://blog.csdn.net/Sixth5/article/details/140342929。1种是有动态数字变化的&#xff0c…

帝王蝶算法(EBOA)及Python和MATLAB实现

帝王蝶算法&#xff08;Emperor Butterfly Optimization Algorithm&#xff0c;简称EBOA&#xff09;是一种启发式优化算法&#xff0c;灵感来源于蝴蝶群体中的帝王蝶&#xff08;Emperor Butterfly&#xff09;。该算法模拟了帝王蝶群体中帝王蝶和其他蝴蝶之间的交互行为&…

vite + vue3 + uniapp 项目从零搭建

vite + vue3 + uniapp 项目从零搭建 1、创建项目1.1、创建Vue3/vite版Uniapp项目1.2、安装依赖1.3、运行项目2、弹出 用户隐私保护提示 方法2.1、更新用户隐私保护指引 和 修改配置文件2.2、授权结果处理方法3、修改`App.vue`文件内容4、处理报`[plugin:uni:mp-using-component…

PyTorch 深度学习实践-逻辑斯蒂回归

视频指路 参考博客笔记 参考笔记二 用来分类的模型 说明&#xff1a;1、 逻辑斯蒂回归和线性模型的明显区别是在线性模型的后面&#xff0c;添加了激活函数(非线性变换) ​ 2、分布的差异&#xff1a;KL散度&#xff0c;cross-entropy交叉熵 现在损失函数衡量不是距离而是分布…

学习react-环境手脚架页面路由

1. 搭建环境 安装node和npm 在下面网址下载node&#xff0c;并安装 https://nodejs.cn/ #检测是否ok node -v npm -v安装react npm install -g create-react-app2. 创建手脚架&#xff08;TypeScript&#xff09; create-react-app my-app --template typescript cd my-a…

梧桐数据库: 数据库技术中的重写子查询技术

数据库技术中的重写子查询技术&#xff0c;是数据库查询优化的一种重要手段。该技术主要通过改变子查询的形式&#xff0c;使其在执行效率和性能上得到优化。以下是对重写子查询技术的详细解析&#xff1a; 一、定义与目的 定义&#xff1a;重写子查询技术是指在数据库查询优…