Javascript返回顶部和砸金蛋,跑马灯等游戏代码实现
1. 我们经常写页面的时候会遇到页面很长需要做返回顶部的操作:
$("id /class").animate({scrollTop:$('.class').offset().top},2000)
- $(".sign,.sign-b,.title-d").click(function(){
- $('html,body').animate({scrollTop:$('.Lp2loding').offset().top},2000);
- });
2.砸金蛋活动
砸金蛋活动程序实现,一般的砸金蛋页面都包含完整的蛋和破碎的蛋以及锤子等图片。
砸金蛋包含的奖品,做到随机不重复的出现。如果需要记录奖品的值,需建立向后台数据库传值。
现在我的程序只涉及前端程序。
前端动画代码部分:
- HTML:
- <div class="block1">
- <div class="eggs">
- <ul class="eggs-1">
- <li><img class="egg" src="data:images/eggs.png"></li>
- <li><img class="egg" src="data:images/eggs.png"></li>
- <div class="clear"></div>
- </ul>
- <ul class="eggs-2">
- <li><img class="egg" src="data:images/eggs.png"></li>
- <li><img class="egg" src="data:images/eggs.png"></li>
- <li><img class="egg" src="data:images/eggs.png"></li>
- <div class="clear"></div>
- </ul>
- <div class="chick">
- <div class="chick-success">
- <img src="data:images/chick.png">
- <div id="text"></div>
- <div class="jp">兑换奖品</div>
- </div>
- <div class="close">X</div>
- </div>
- </div>
- <p>您还有 <span id="chance">5</span>次砸蛋机会</p>
- </div>
- Animation CSS:
- /**animation css**/
- .overlay,.overlay2 {width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.5);z-index: 6;display: none;}
- .overlay2{z-index: 11;}
- .hammer {
- position: absolute;
- z-index: 10;
- left: 50%;
- top: 0%;
- opacity:0;
- max-width: none;
- -webkit-animation: hammer 0.5s alternate;
- animation: hammer 0.5s alternate;
- transform-origin: bottom right;
- -webkit-transform-origin: bottom right;
- }
- .egg{cursor:pointer;}
- .egg-po {
- display: block;
- max-width: none;
- display: none;
- }
- .eggs{position: relative;}
- .chick{display: none;z-index: 10;position: absolute;top: 0%;left: 50%;margin-left: -350px;}
- div#text {
- color: #fff;
- font-size: 20px;
- font-weight: bold;
- text-shadow: 1px 1px 0px #ca1414, -1px -1px 0px #ca1414, 1px 3px 0px #ca1414, -1px -3px 0px #ca1414, 3px 3px 0px #ca1414, -3px -3px 0px #ca1414;
- margin-top: -36%;
- text-align: center;
- }
- .close,.close-f {font-size: 24px;top: 20%;right: 20%;width: 30px;height: 30px;line-height: 30px;color: #fff;background: #ff0000;border-radius: 50px;position: absolute;cursor:pointer;}
- .close-f {top: -30px;right: -30px;}
- .jp {
- color: #fff;
- font-size: 18px;
- font-weight: bold;
- background: #ca1414;
- display: inline-block;
- padding: 0 40px;
- border-radius: 10px;
- line-height: 35px;
- cursor: pointer;
- margin-top: 20px;
- }
- @keyframes hammer
- {
- 0%
- {
- opacity: 1;
- }
- 50%
- {
- transform: rotate(-15deg);
- opacity: 1;
- }
- 70%
- {
- opacity: 1;
- }
- 90%
- {
- opacity: 1;
- }
- 100%
- {
- opacity: 0;
- }
- }
- @-webkit-keyframes hammer
- {
- 0%
- {
- opacity: 1;
- }
- 50%
- {
- -webkit-transform: rotate(-15deg);
- opacity: 1;
- }
- 100%
- {
- opacity: 0;
- }
- }
JS动态效果实现
- <script type="text/javascript">
- //多少次砸蛋的机会
- var chance=5;
- $("#chance").text(chance);
- //设置奖品,每砸蛋一次砸中奖品从数组中删除,从剩下的奖品中重新抽,保证抽取的奖品不重复
- var msg = ["获得1000美元赠金","获得500元京东卡","获得U盘+高级笔+充电宝","获得保温杯","获得外汇交易书+高级伞+手机支架+海马刀"]
- for(let i=0;i<5;i++){
- function gift(){
- var num=Math.floor(Math.random() * msg.length);
- bb=msg.splice(num,1);
- // console.log(num,bb,msg.length)
- }
- }
- //设置主逻辑chance控制次数,gift()奖品,点击蛋之后,原来的蛋消失,锤子和破蛋出现
- function aClick() {
- // $(".eggs li").off("click", aClick);
- gift();
- chance-=1;
- $("#chance").text(chance);
- if(chance<0){
- chance = 0;
- $("#chance").text(chance);
- $(".egg ").on("click", aClick);
- }
- else {
- var _this = $(this);
- var eggli=_this.parent('li');
- eggli.html('<img src="data:images/hammer.png" class="hammer"><img src="data:images/egg-po.png" class="egg-po" display="block">');
- setTimeout(function () {
- eggli.find(".egg-po").show();
//再次设置setTimeout,填写所剩次数,弹出遮罩层,以及小鸡填写信息表等- setTimeout(function () {
- $(".overlay").show();
- $("#text").html(bb);
- $(".chick").show();
- },500);
- },250);
- $(".close").click(function () {
- $(".overlay,.chick").hide();
- })
- $(".jp").click(function(){
- // $(".overlay").css({'z-index':"11"});
- $(".overlay2,.form-sign").show();
- })
- $(".close-f").click(function () {
- $(".overlay,.overlay2,.form-sign,.chick").hide();
- })
- }
- }
- $(".egg").on("click", aClick);
- </script>
3.程序设计
此时需要三张背景图相同的背景图
- <style>
- *{padding: 0;margin: 0;}
- #slotmachine_wrapper {
- width:100%;
- background: url(gift-bg.jpg)top center no-repeat;
- }
- #slotmachine {
- width:100%;
- max-width:1200px;
- position: relative;
- margin:0 auto;
- }
- /*Play Button*/
- #play_button{
- background: url(button.png)top center no-repeat;
- width: 388px;
- height: 126px;
- cursor: pointer;
- margin: 55px auto 0;
- }
- .reels {
- margin:0 auto;
- width: 100%;
- font-size:0;
- position: absolute;
- top: 28%;
- }
- /*Slot Reel holder*/
- .center {
- width: 666px;
- margin: 0 auto;
- padding: 40px 0;
- position: relative;
- z-index: 2;
- }
- /*Reels */
- .slot {
- font-size:0;
- display:inline-block;
- width:208px;
- height:286px;
- position:relative;
- top:8px;
- }
- .slot_title{text-indent: -99999px;font-size: 0;}
- #reel_one,#reel_two,#reel_three {
- background:url(gift.jpg);
- background-repeat:repeat-y;
- zoom: .8;
- margin: 0 23px;
- box-shadow: 0 0 50px #cbbdbf;
- border-radius: 10px;
- }
- #reel_one{background-position:0 0;}
- #reel_two {background-position:0 286px;margin: 0 50px;}
- #reel_three {background-position:0 858px;}
- .reelOneAnimation{
- animation:animatedBackground .3s linear infinite;
- -webkit-animation:animatedBackground .3s linear infinite;
- -moz-animation:animatedBackground .3s linear infinite;
- -o-animation:animatedBackground .3s linear infinite;
- }
- .reelTwoAnimation{
- animation:animatedBackground 1s linear infinite;
- -webkit-animation:animatedBackground 1s linear infinite;
- -moz-animation:animatedBackground 1s linear infinite;
- -o-animation:animatedBackground 1s linear infinite;
- }
- .reelThreeAnimation {
- animation:animatedBackground .5s linear infinite;
- -webkit-animation:animatedBackground .5s linear infinite;
- -moz-animation:animatedBackground .5s linear infinite;
- -o-animation:animatedBackground .5s linear infinite;
- }
- .overlay {
- width: 100%;
- height: 100%;
- position: fixed;
- background: rgba(0,0,0,0.5);
- z-index: 3;
- }
- .close {
- color: #bbcff2;
- font-size: 20px;
- top: 40px;
- position: absolute;
- right: 10px;
- border-radius: 100%;
- border: 1px solid;
- width: 30px;
- height: 30px;
- text-align: center;
- line-height: 30px;
- cursor: pointer;
- }
- .form-hover,.overlay{display: none;}
- /*Animation for reels */
- @keyframes animatedBackground {
- from {
- background-position:0 0;
- }
- to {
- background-position:0 1000%;
- }
- }
- @-webkit-keyframes animatedBackground {
- from {
- background-position:0 1000%;
- }
- to {
- background-position:0 0;
- }
- }
- @-moz-keyframes animatedBackground {
- from {
- background-position:0 1000%;
- }
- to {
- background-position:0 0;
- }
- }
- @-o-keyframes animatedBackground {
- from {
- background-position:0 1000%;
- }
- to {
- background-position:0 0;
- }
- }
- /*Slot Machine foot*/
- .slot_foot {
- width:110%;
- height:40px;
- background:#000;
- margin:0 auto;
- position:relative;
- margin-left:-5%;
- }
- </style>
- <div class="overlay"></div>
- <div id="slotmachine_wrapper">
- <h1 class="slot_title">
- Facebook lottery
- </h1>
- <!-- Slot machine sign and lights-->
- <div id="slotmachine">
- <img class="img-pc" src="gift-img.jpg">
- <img class="img-m" src="gift-m-img.jpg">
- <!-- Reels-->
- <div class="reels">
- <div class="reels_bk">
- <div class="center">
- <div class="slot" id="reel_one">
- </div>
- <div class="slot" id="reel_two">
- </div>
- <div class="slot" id="reel_three">
- </div>
- </div>
- </div>
- <div id="play_button" >
- </div>
- </div>
- </div>
- </div>
Js部分控制出现的奖品,并弹出表单已获得联系信息
- <script>
- (function espressoBarSlot() {
- //Background position for reels
- var reelGift = ['$100000模拟赠金', '免费体验模拟账户', '$50000模拟赠金', '免费体验真实账户', '市场价$200在线交易课堂','$10000模拟赠金','1个月交易教学直播会员','专业分析师30分钟电话指导',];
- var randomNum = Math.floor(Math.random() * 8)
- var randomReelOne = -286*randomNum;
- //Play click event
- $('#play_button').click(function() {
- $('#play_button').unbind('click');
- //make button unclickable while game is in play
- //add animation to the reels
- $('#reel_one').addClass('reelOneAnimation');
- $('#reel_two').addClass('reelTwoAnimation');
- $('#reel_three').addClass('reelThreeAnimation');
- //Time out for reel one
- setTimeout(function() {
- $('.reelOneAnimation').css(
- //set background position by applying randomReelOne value to the reelPosition array.
- 'background-position', '0 ' +randomReelOne+ 'px'
- ).removeClass('reelOneAnimation');
- }, 1000);
- //Time out for reel two
- setTimeout(function() {
- $('.reelTwoAnimation').css(
- //set background position by applying randomReelTwo value to the reelPosition array.
- 'background-position', '0 ' +randomReelOne + 'px'
- ).removeClass('reelTwoAnimation');
- }, 2000);
- //Time out for reel three and display if user has won or lost
- setTimeout(function() {
- $('.reelThreeAnimation').css(
- //set background position by applying randomReelThree value to the reelPosition array.
- 'background-position', '0 ' +randomReelOne + 'px'
- ).removeClass('reelThreeAnimation');
- //Decide what the user has won.
- $('.overlay,.form-hover').fadeIn()
- $('.form-title').html('恭喜你,“'+reelGift[randomNum]+'”奖已放入您的账户,快来注册领取吧!')
- console.log(randomNum,randomReelOne,reelGift[randomNum]);
- espressoBarSlot();
- }, 4000);
- });
- })();
- var num=1;
- $('.close').click(function(){
- if(num>=3){alert('您的抽奖次数已用尽!');return false;}
- num++;
- $('.overlay,.form-hover').fadeOut()
- })
- </script>
4.九宫格跑马灯游戏:
- <!DOCTYPE html>
- <html>
- <head>
- <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
- <title>Document</title>
- <style>
- .luck-0{
- background: #ef88ab;
- }
- .luck-1{
- background: #e578f5;
- }
- .luck-2{
- background: #534bf1;
- }
- .luck-3{
- background: #4bc6f1;
- }
- .luck-4{
- background: #4bf1c1;
- }
- .luck-5{
- background: #aeec2b;
- }
- .luck-6{
- background: #f5f519;
- }
- .luck-7{
- background: #e4820e;
- }
- #luckStage {
- width: 300px;
- height: 300px;
- margin: 0px auto;
- border: 2px solid #f90;
- }
- #luckStage table td {
- position: relative;
- width: 100px;
- height: 100px;
- text-align: center;
- /* border: 1px #ccc solid; */
- font-size: 20px;
- }
- #luckStage table td a {
- width: 100px;
- height: 100px;
- display: block;
- background: red;
- opacity: .7;
- line-height: 100px;
- }
- #luckStage table td a:hover{
- opacity: 1;
- }
- #luckStage table td.active .mask {
- display: block;
- }
- .mask {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- background: rgba(0, 0, 0, .8);
- display: none;
- }
- </style>
- </head>
- <body>
- <div id="luckStage">
- <table border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td class="luck-cell luck-0">0
- <div class="mask"></div>
- </td>
- <td class="luck-cell luck-1">1
- <div class="mask"></div>
- </td>
- <td class="luck-cell luck-2">2
- <div class="mask"></div>
- </td>
- </tr>
- <tr>
- <td class="luck-cell luck-7">7
- <div class="mask"></div>
- </td>
- <td>
- <a href="javascript:;" id="btn-start">click</a>
- </td>
- <td class="luck-cell luck-3">3
- <div class="mask"></div>
- </td>
- </tr>
- <tr>
- <td class="luck-cell luck-6">6
- <div class="mask"></div>
- </td>
- <td class="luck-cell luck-5">5
- <div class="mask"></div>
- </td>
- <td class="luck-cell luck-4">4
- <div class="mask"></div>
- </td>
- </tr>
- </table>
- </div>
- <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
- <script>
- //main js
- function random(n, m){
- var c = m-n+1;
- return Math.floor(Math.random() * c + n);
- }
- function Luck(id) {
- this.index = -1; //当前位置索引
- this.cells = 0; //总共有多少个位置
- this.timer = null; //定时器id
- this.speed = 120; //初始转动速度
- this.times = 0; //转动次数
- this.baseTimes = random(80, 120); //至少转动次数
- this.prize = random(0, 7); //中奖位置
- this.init(id);
- }
- Luck.prototype = {
- init: function(id) {
- if (!id) {
- throw new Error("params id is null, this is should has a id!")
- }
- this.obj = $("#" + id);
- this.cells = this.obj.find(".luck-cell").length;
- this.obj.find(".luck-" + this.index).addClass("active");
- },
- clear: function (){
- this.speed = 20;
- this.times = 0;
- this.baseTimes = random(80, 100);
- this.prize = random(0, 7);
- },
- setActive: function() {
- var index = this.index;
- var cells = this.cells;
- var obj = this.obj;
- obj.find(".luck-" + index).removeClass("active");
- index += 1;
- if (index > cells - 1) {
- index = 0;
- };
- obj.find(".luck-" + index).addClass("active");
- this.index = index;
- },
- run: function(callback) {
- this.times += 1;
- this.setActive();
- if (this.times > this.baseTimes+8 && this.prize == this.index) {
- clearTimeout(this.timer);
- this.clear();
- typeof callback == 'function' && callback();
- } else {
- if(this.times < this.baseTimes){
- this.speed -= 5;
- }else{
- this.speed += 25;
- }
- if(this.speed < 20){
- this.speed = 20;
- }
- this.timer = setTimeout(this.run.bind(this, callback), this.speed);
- }
- }
- }
- var myLuck = new Luck("luckStage");
- var clicked = false;
- $("#btn-start").on("click", function (){
- if(clicked){
- return ;
- }
- clicked = true;
- myLuck.run(function (){
- clicked = false;
- });
- })
- </script>
- </body>
- </html>
Javascript返回顶部和砸金蛋,跑马灯等游戏代码实现的更多相关文章
- javascript返回顶部几种代码总结
纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...
- javascript返回顶部插件+源码
javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...
- JavaScript返回顶部特效
样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...
- 写一个JavaScript“返回顶部”功能
在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...
- Javascript返回顶部
控制按钮下拉到达一定距离时显示,返回顶层时消失,用JS中的延时定时器来模拟滚动条效果 <script type="text/javascript"> window.on ...
- javascript 返回顶部
<style> #linGoTopBtn { POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; ...
- vue制作滚动条幅-跑马灯效果实例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript “跑马灯”抽奖活动代码解析与优化(二)
既然是要编写插件.那么叫做"插件"的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率.那么叫做插件的东西应该具有哪些基本特征呢?让我们来总结一下: 1.J ...
- 【JavaScript&jQuery】返回顶部
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- gotop(返回顶部)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- #差分约束系统#CodeChef Digit Matrix&洛谷 7515 [省选联考 2021 A 卷] 矩阵游戏
洛谷传送门 DGMATRIX 分析 先任意构造出一个不一定满足值域的矩阵,现在只需要满足值域就可以了. 可以发现,给一行或一列依次加一减一2*2矩阵的和仍然不变,并且如果有解一定能构造出一组方案. 因 ...
- 关于pwn题的栈平衡中ret的作用
以nssctf里的where_is_my_shell为例 题目提供了一个system函数,和一个buf数组.数组的栈空间如图所示,这里不讨论怎么解题,只说明payload里的ret的作用. 假设没有r ...
- 【直播回顾】OpenHarmony知识赋能第五期第二课——如何成为社区贡献达人
4月28日晚上19点,知识赋能第五期第二节课<如何成为OpenHarmony社区贡献达人?>,在OpenHarmony开发者成长计划社群内成功举行. 本期课程,由华为社区运营专家祝尚元主讲 ...
- C#中操作Excel
在GIS数据处理中,经常遇到与Excel的交互,这里进行简单的总结. Excel行列号就像是编辑中的二维数据组,操作Excel相当于操作二维数组.遍历.循环.取值.赋值-- 1.添加引用 添加引用也有 ...
- 聚焦AI新技术,HMS Core机器学习服务为移动应用智能化注入新动力
近年来,以机器学习为代表的人工智能技术(以下简称AI技术)蓬勃发展.新算法层出不穷,开发出的图像识别.自然语言.活体检测等能力令智能化的未来生活不再遥不可及.同时,这些AI技术正持续演化和发展,数据和 ...
- MindSpore自动微分小技巧
技术背景 基于链式法则的自动微分技术,是大多数深度学习框架中所支持的核心功能,旨在更加快速的进行梯度计算,并且可以绕开符号微分的表达式爆炸问题和手动微分的困难推导问题.本文主要基于MindSpore框 ...
- 进阶 stack smashing--canary 报错利用 && environ泄露栈地址
进阶 stack smashing--canary 报错利用 && environ泄露栈地址 这部分是对进阶stack smashing的使用,以及对 environ的认识,我们可以看 ...
- 学习Source Generators之了解Source Generators的应用场景
前面的文章我们都初步学习了Source Generators的使用方式以及做了一些简单的代码生成工具. 但是Source Generators除了做自动代码生成之外,还能有别的应用场景,本文来了解一下 ...
- Solon 的事务管理工具类(TranUtils)
Solon 在编码上,是强调注解与手写并重的一个风格.它有个 @Tran 注解,用于事务管理(可以参考:<事务的全局控制及应用>).这里,主要是讲讲它的手动处理工具类 TranUtils. ...
- Linux系统中查找文件的方法
-name 必须用到的选项.表明要求系统按照文件名查找. 一般格式:find /(dirname) -name filename 具体文件名查找法: 如果知道了某个文件的文件名,而不知道这个文件放到哪 ...