前端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的数据集的自…

在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…

持续集成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…

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…

昇思25天学习打卡营第15天|两个分类实验

打卡 目录 打卡 实验1&#xff1a;K近邻算法实现红酒聚类 数据准备 模型构建--计算距离 计算演示 模型预测 实验2&#xff1a;基于MobileNetv2的垃圾分类 任务说明 数据集 参数配置&#xff08;训练/验证/推理&#xff09; 数据预处理 MobileNetV2模型搭建 Mobile…

AGI 之 【Hugging Face】 的【零样本和少样本学习】之三 [无标注数据] 的简单整理

AGI 之 【Hugging Face】 的【零样本和少样本学习】之三 [无标注数据] 的简单整理 目录 AGI 之 【Hugging Face】 的【零样本和少样本学习】之三 [无标注数据] 的简单整理 一、简单介绍 二、零样本学习 (Zero-shot Learning) 和少样本学习 (Few-shot Learning) 1、零样本学…

钡铼分布式 IO 系统 OPC UA边缘计算耦合器BL205

深圳钡铼技术推出的BL205耦合器支持OPC UA Server功能&#xff0c;以服务器形式对外提供数据。符合IEC 62541工业自动化统一架构通讯标准&#xff0c;数据可以选择加密&#xff08;X.509证书&#xff09;、身份验证方式传送。 安全策略支持basic128rsa15、basic256、basic256s…

【Git远程操作】理解分布式管理 | 创建远程仓库

目录 1.理解分布式管理 多人协作开发 2.创建远程仓库 2.1仓库名&路径 2.2初始化仓库&设置模板 1.理解分布式管理 目前我们学习的所有内容都是在本地来完成的。&#xff08;add /commit /版本撤销回退/分支管理&#xff09; Git是一个分布式 的版本控制系统。 分支…

数据挖掘与分析部分实验与实训项目报告

一、机器学习算法的应用 1. 朴素贝叶斯分类器 相关代码 import pandas as pd from sklearn.model_selection import train_test_split from sklearn.naive_bayes import GaussianNB, MultinomialNB from sklearn.metrics import accuracy_score # 将数据加载到DataFrame中&a…

算法工程师第十四天(找树左下角的值 路径总和 从中序与后序遍历序列构造二叉树 )

参考文献 代码随想录 一、找树左下角的值 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出: 7 层次遍历&#…

【hadoop大数据集群 2】

【hadoop大数据集群 2】 文章目录 【hadoop大数据集群 2】1. 虚拟机克隆2. 时间同步3. 环境变量配置、启动集群、关闭集群 1. 虚拟机克隆 克隆之后一定要重新生成新虚拟机唯一的MAC地址和UUID等&#xff0c;确保新虚拟机与源虚拟机在网络拓扑中不发生冲突。 注意1.生成新的MA…