自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-07-19 12:08 前端  javascript  开发语言  

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-实现响应式节庆活动砸金蛋效果


原文地址：https://blog.csdn.net/2401_85903333/article/details/139999864

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

  • 【第34章】Spring Cloud之SkyWalking分布式日志

    前面已经完成了请求的链路追踪，这里我们通过SkyWalking来处理分布式日志；场景描述：我们有三个服务消费者，提供者和用户服务，三个服务都有自己的日志文件，但是我一个请求会贯穿三个服务，不能说我一个

    阅读更多2024-09-21
  • C++模板初阶

    在之前的代码实现当中当我们要让一个函数能处理不同类型的数据时就只能使用函数重载，并且在此数据的类型还必须是我们重载的函数内拥有的，否则就无法实现。在之前实现顺序表、链表等数据结构时我们使用的是type

    阅读更多2024-09-21
  • 探索IT世界：从技术基础到职业发展

    信息技术（IT）已经深深融入我们的日常生活，成为全球各行各业的核心力量。无论是智能手机应用、网络服务，还是企业的大型系统，IT技术无处不在。如果你是初学者，想要了解IT行业的广度和深度，那么这篇文章将

    阅读更多2024-09-21
  • SQL 语法学习：深入了解与大数据处理的桥梁

    SQL 是用于管理和操作关系型数据库的标准语言。它主要用于查询、插入、更新、删除数据库中的数据，并管理数据库的表结构等。SQL 最初由IBM公司开发，之后逐渐演变成了各大数据库管理系统（如MySQL、

    阅读更多2024-09-21
  • Vue 项目中引入 Axios 详解

    在 Vue 项目中，`axios` 是一个非常流行的 HTTP 客户端，用于向服务器发送请求并处理响应。本文将详细说明如何在 Vue 项目中引入 Axios 插件，以及如何进行基本的配置，包括构建、配

    阅读更多2024-09-21
  • go 实现操作mysql并且防止sql注入

    在最近使用go语言的同学，大家有没有操作数据库的时候遇到过sql注入的问题，sql注入会把数据库搞崩，或者是把数据库的数据全部查出造成不必要的随时,今天小程同学就给大家带来一个go中防sql注入的最好

    阅读更多2024-09-21
  • Python学习

    1.计算机的作用是计算，编程的目的为了更方便的计算，计算的对象是数据2.变量是程序在运行过程中临时用于储存数据的东西。

    阅读更多2024-09-21
  • 【RabbitMQ】应用

    P: ⽣产者, 也就是要发送消息的程序C: 消费者,消息的接收者Queue: 消息队列, 图中⻩⾊背景部分. 类似⼀个邮箱, 可以缓存消息;

    阅读更多2024-09-21
  • 鹏哥C语言39---分支/循环语句练习：猜数字游戏

    /---------------------------------------------------------------------------------------------------

    阅读更多2024-09-21
  • 自然语言处理-基于注意力机制的文本匹配

    任务三：基于注意力机制的文本匹配输入两个句子判断，判断它们之间的关系。参考（可以只用LSTM，忽略Tree-LSTM），用双向的注意力机制实现。参考》 第7章实现要求：Pytorch知识点：注意力机制

    阅读更多2024-09-21
自学内容网
Copyright © 2015-2024