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

于 2024-07-19 08:00:00 发布
阅读量464 收藏
点赞数 12
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85903333/article/details/139999864
版权

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

强迫领导写Bug
关注
用html CSS实现砸金蛋,css3+js 实现砸金蛋效果
weixin_30276623的博客
07-01 1485
最近闲来无事，在网上看到有人写了个砸金蛋的效果，他是没有用到css3的，当时我就感觉没什么动态效果感觉体验不是很好，所有我就想用css3来改下，于是也来试着写写。本来想弄个视频给你们看看效果的，但是不知道怎么上传视频，就只有给你们看看效果的图片，还有就是图片是我自己弄得不怎么会p图，不要见笑啊！好了，为了不让我们成为键盘侠，我就不贴代码了，大部分地方我都写注释了，所以就不多介绍了，有点基础的都可以...
Cocos Creator下JavaScript模拟砸金蛋3d旋转效果，附代码
一枚小工
09-30 1152
​获取代码 关注微信公众号，发送【砸蛋】获取代码 效果预览 使用说明 点击add，添加蛋到盘子上，蛋的数量后台可配置； 点击move，让蛋在盘子上转动起来； 点击stop，让蛋停止转动。 蛋旋转效果实现 椭圆定义 平面内与两定点、的距离的和等于常数()的动点P的轨迹叫做椭圆。 即： 其中两定点、叫做椭圆的焦点，两焦点的距离叫做椭圆的焦...
js砸金蛋程序
11-13
时下最流行的购物砸金蛋程序。方便集成到你的系统中，有砸金蛋概率设置。
微信活动——砸金蛋
weixin_34106122的博客
04-15 202
今天微信这边开始做游戏了，感觉挺好玩儿的，我被分到了一个砸金蛋的游戏。先看下实现后的效果： 这个游戏因为不仅涉及到前台的JS等等，还要从后台获取数据，比如，设置的概率什么的，奖品数量。 ok,上源码： <!DOCTYPE HTML> <html&g...
js砸金蛋抽奖js特效
ICode联盟
08-08 527
js砸金蛋抽奖特效代码，基于jquery实现的砸金蛋抽奖活动页面。
砸金蛋小程序 HTML5 +JS(重新测试过)
01-08
HTML5 + JS 砸金蛋小程序, 已重新调整，可直接运行， 欢迎下载
css3+js 实现砸金蛋效果
小皮的博客
04-06 3192
　　最近闲来无事，在网上看到有人写了个砸金蛋的效果，他是没有用到css3的，当时我就感觉没什么动态效果 感觉体验不是很好，所有我就想用css3来改下，于是也来试着写写。 本来想弄个视频给你们看看效果的，但是不知道怎么上传视频，就只有给你们看看效果的图片，图片是我自己弄得 不怎么会p图，不要见笑啊！   大部分地方我都写注释了，所以就不多介绍了，有点基础的都可以看懂。...
H5砸金蛋-特效+移动端试用
10-20
H5砸金蛋-特效+移动端试用-可以直接使用的，里面的注释很清楚自己可以改
js-实现响应式节庆活动砸金蛋效果.rar
06-23
js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆活动砸金蛋效果.rar js-实现响应式节庆...
9套-节庆&节假&节日网站模板-HTML源码合集-响应式适配移动端.zip
04-28
这份资源是一套包含9套专业的节庆、节假和节日主题的网站模板，采用HTML源码编写，并具有响应式设计，能够自适应不同尺寸的屏幕，包括移动端设备。这些模板适用于各种庆祝活动、特殊场合和节日庆典的网站设计和开发...
js抽奖小游戏的源码（砸金蛋）.7z
09-27
包内有各种js抽奖小游戏的源码（砸金蛋、刮刮乐等），希望对大家有用；
javascript抽奖程序，砸金蛋
06-01
年会抽奖程序，砸金蛋，可以设置金蛋个数，以及中奖概率
Cocos Creator模拟砸金蛋3d旋转效果 | 附代码egg.zip
12-13
Cocos Creator模拟砸金蛋3d旋转效果 | 附代码egg.zip // Learn TypeScript: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html // Learn Attribute: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html // Learn life-cycle callbacks: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html const {ccclass, property} = cc._decorator; @ccclass export default class Game extends cc.Component { @property Count: number = 5; @property(cc.Prefab) prefab: cc.Prefab = null; @property(cc.Node) nodeParent: cc.Node = null; private mEggs: cc.Node[] = []; // LIFE-CYCLE CALLBACKS: // onLoad () {} start () { } // update (dt) {} onClick(event, data){ switch(data){ case 'add':{ this.addEggs(); break; } case 'move':{ this.moveEggs(); break; } case 'stop':{ this.stopMoveEggs(); break; } } } addEggs(){ if(this.Count <= 0){ return; } this.mEggs = []; const N = 360 / this.Count; for(let i = 0; i < this.Count; i++){ let egg = cc.instantiate(this.prefab); let js = egg.getComponent('Egg'); js.setRadian(i * N * Math.PI / 180); js.updatePos(); egg.parent = this.nodeParent; this.mEggs.push(egg); } } moveEggs(){ for(let i = 0; i < this.mEggs.length; i++){ this.mEggs[i].getComponent('Egg').setMove(true); } } stopMoveEggs(){ for(let i = 0; i < this.mEggs.length; i++){ this.mEggs[i].getComponent('Egg').setMove(false); } } }
HTML5砸金蛋源码
12-13
HTML5+Php实现简单的砸金蛋小游戏，不依赖数据库，只实现基本功能，使用集成环境即可运行。
Js放烟花特效
06-03
Js放烟花特效，这个更牛比，烟花筒也能用JS做出来，佩服，很逼真的烟花效果啊，作者JavaScript水平真棒啊！
web前端网站源码：永恒婚庆策划响应式网页模板.zip
最新发布
09-04
探索未来设计的数字前沿，这份精心设计的“web前端网站源码”无疑是您不可错过的创意宝藏。它巧妙融合了现代网页设计的灵动，打造出一个既展现专业实力又兼顾用户体验的在线空间。 该源码采用了最前沿的HTML5、CSS3...
HTML网站源码-婚庆婚礼策划服务网页模板-响应式源码.zip
03-26
此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。同时...
[web前端]&[课程设计]&[网站源码]-婚庆策划方案展示响应式网站模板.7z
06-21
专为前端开发专业人士和爱好者打造的高级学习资源。 在移动互联网时代，响应式网页设计已变得不可或缺。这份源码深入响应式设计的核心，通过精细的HTML代码，展示了如何快速有效地构建在各种屏幕尺寸上自动适应的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值