-来-自-插-件-的-老-虎-机-！

最新推荐文章于 2024-09-16 08:47:17 发布
最新推荐文章于 2024-09-16 08:47:17 发布
阅读量88 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/sugege/p/6726352.html
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>
        <script type="text/javascript" src="js/public.js" ></script>
        <script type="text/javascript" src="js/easing.js" ></script>
        <link rel="stylesheet" href="css/style.css" />
        <title></title>
        <style>
            .prev,.next{width:8rem;height:8rem;-webkit-transform-style: preserve-3d;margin:0 auto;}
            .prev{background:url(img/num_yin.png) top center repeat-y;background-size:8rem 80rem;-webkit-transform:perspective(500px) rotateX(45deg) scale(0.8) translateY(-3rem);}
            .next{background:url(img/num_yin.png) top center repeat-y;background-size:8rem 80rem;-webkit-transform:perspective(500px) rotateX(-45deg) scale(0.8) translateY(4rem);}
        </style>
    </head>
    <body>
        <div class="page no01">
            <div class="no02_hint">分享朋友圈，邀请一个好友赠送一次机会，<br />好友充值1元再赠送一次，好友充值多少送多少</div>
            <!-- 老鼠机  start -->
            <div class="tiger clearfix">
                <div class="num">
                    <div class="prev"></div>
                    <div class="anim"></div>
                    <div class="next"></div>
                </div>
                <div class="num">
                    <div class="prev"></div>
                    <div class="anim"></div>
                    <div class="next"></div>
                </div>
                <div class="num">
                    <div class="prev"></div>
                    <div class="anim"></div>
                    <div class="next"></div>
                </div>
            </div>
            <!-- 老鼠机  end -->
            <div class="clearfix opens">
                <button class="flt play_num">X1</button>
                <button class="frt opengame">启动</button>
            </div>
        </div>
    </body>
</html>

<script>
var isBegin = false;
$(function(){
    var u = 80;        //每个数字的高
    var oFoucs = 0;
    var oArrColorN = ["00","11","22","33","44","55","66","77","88","99","12","23","34","45","56","67","78","89","000","111","222","333","444","555","666","777","888","999","012","123","234","345","456","567","678","789","520"]
    $('.opengame').click(function(){
//        if(isBegin) return false;
        isBegin = true;
        $(".anim").css('backgroundPositionY',0);
        $(".prev").css('backgroundPositionY',0);
        $(".next").css('backgroundPositionY',0);
        $(".anim").removeClass("on");
        oFoucs=0;
        var result = 189;        //这里设置点数
        var num_arr = (result+'').split('');
        $(".anim").each(function(index){
            var _num = $(this);
            setTimeout(function(){
                _num.animate({ 
                    backgroundPositionY: ((u*60) - (u*num_arr[index]))/10+"rem"
                },{
                    duration: 6000+index*3000,
                    easing: "easeInOutCirc",
                    complete: function(){
                        oFoucs++;
//                        alert(oFoucs)
                        result = result+'';
                        if(oFoucs==3){
                            for(var i=0;i<oArrColorN.length;i++){
                                if(result.indexOf(oArrColorN[i]) != -1){
                                    var weizhi = result.indexOf(oArrColorN[i]);
                                    var geshu = oArrColorN[i].length;
//                                    $(".anim").eq(weizhi).addClass("on");
                                    for(var o=weizhi;o<oArrColorN[i].length+weizhi;o++){
                                        $(".anim").eq(o).addClass("on");
                                    }
                                }
                            }
                        }
                    }
                });
            }, index * 300);
        });
        
        $(".prev").each(function(index){
            var _num = $(this);
            setTimeout(function(){
                _num.animate({ 
                    backgroundPositionY: ((u*60) - (u*num_arr[index]) + u)/10 +"rem"
                },{
                    duration: 6000+index*3000,
                    easing: "easeInOutCirc",
                    complete: function(){}
                });
            }, index * 300);
        });
        $(".next").each(function(index){
            var _num = $(this);
            setTimeout(function(){
                _num.animate({ 
                    backgroundPositionY: ((u*60) - (u*num_arr[index]) - u)/10 +"rem"
                },{
                    duration: 6000+index*3000,
                    easing: "easeInOutCirc",
                    complete: function(){}
                });
            }, index * 300);
        });
    });    
});
</script>

主要布局css（ps：加上html文件上的代码，因为那是临时添加的）：

/*老鼠机*/
.tiger{padding:0 1rem;box-sizing:border-box;}
.tiger .num{width:33.333%;height:100%;float:left;text-align:center;position:relative;}
.anim{position:absolute;left:50%;top:50%;margin-left:-4rem;margin-top:-5rem;width:8rem;height:8rem; background: url(../img/num_yin.png) top center repeat-y;background-size:8rem 80rem;}
.on.anim{ background: url(../img/num_jin.png) top center repeat-y;background-size:8rem 80rem;-webkit-animation:fd 1s ease 1;}
@-webkit-keyframes fd{
    0%,100%{-webkit-transform:scale(1);opacity:1;}
    70%{-webkit-transform:scale(1.5);}
    80%{opacity:1;}
    90%{-webkit-transform:scale(1.8);opacity:0;}
}

 

 

其中主要库是easing.js，这是一个速度变化的库，速度变化~

 

下面是easing.js的代码：

// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
    def: 'easeOutQuad',
    swing: function (x, t, b, c, d) {
        //alert(jQuery.easing.default);
        return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
    },
    easeInQuad: function (x, t, b, c, d) {
        return c*(t/=d)*t + b;
    },
    easeOutQuad: function (x, t, b, c, d) {
        return -c *(t/=d)*(t-2) + b;
    },
    easeInOutQuad: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInCubic: function (x, t, b, c, d) {
        return c*(t/=d)*t*t + b;
    },
    easeOutCubic: function (x, t, b, c, d) {
        return c*((t=t/d-1)*t*t + 1) + b;
    },
    easeInOutCubic: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
    },
    easeInQuart: function (x, t, b, c, d) {
        return c*(t/=d)*t*t*t + b;
    },
    easeOutQuart: function (x, t, b, c, d) {
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeInOutQuart: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    easeInQuint: function (x, t, b, c, d) {
        return c*(t/=d)*t*t*t*t + b;
    },
    easeOutQuint: function (x, t, b, c, d) {
        return c*((t=t/d-1)*t*t*t*t + 1) + b;
    },
    easeInOutQuint: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
        return c/2*((t-=2)*t*t*t*t + 2) + b;
    },
    easeInSine: function (x, t, b, c, d) {
        return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
    },
    easeOutSine: function (x, t, b, c, d) {
        return c * Math.sin(t/d * (Math.PI/2)) + b;
    },
    easeInOutSine: function (x, t, b, c, d) {
        return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
    },
    easeInExpo: function (x, t, b, c, d) {
        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    },
    easeOutExpo: function (x, t, b, c, d) {
        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    },
    easeInOutExpo: function (x, t, b, c, d) {
        if (t==0) return b;
        if (t==d) return b+c;
        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
    },
    easeInCirc: function (x, t, b, c, d) {
        return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
    },
    easeOutCirc: function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
    },
    easeInOutCirc: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
        return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
    },
    easeInElastic: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    easeOutElastic: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },
    easeInOutElastic: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    },
    easeInBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    },
    easeInOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158; 
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    easeInBounce: function (x, t, b, c, d) {
        return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
    },
    easeOutBounce: function (x, t, b, c, d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    },
    easeInOutBounce: function (x, t, b, c, d) {
        if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
        return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
    }
});

 

 

效果图如下：

 

转载于:https://www.cnblogs.com/sugege/p/6726352.html

aifu8508
关注
JavaEE初阶-计算机是如何工作的
Gremmie的博客
07-27 1251
本篇文章着重介绍了计算机的组成原理中关于进程的内容,以及一些Java的发展史
幼儿-综合素质【2】
robin9409的博客
03-10 1万+
1.材料分析题：材料：一天早上，陈一航蹦蹦跳跳地走进教室，在搬椅子时，他发现旁边小朋友的椅子上有一本书没有收好，便大声喊道：“余老师，这儿有一本书没有收。”余老师笑看说：“那就请你把它送回去，好吗？”他高兴地把书拿往图书角。由于陈一航平时吃饭、睡觉、上课、活动无一不让老师费心，所以余老师一直盯着他的送书过程，生怕他把书拿到别处去。当他把书拿到书柜前，正想顺手往里面一扔时，余老师连忙说：“谢谢你哦，你帮了我的一个大忙，要不等会儿我还得自己把书整理好。”他听了后连忙把书放整齐，离开书柜了，还不时地回头看看书本是
utf-8 编码 转换 汉字 字符集
漫步繁华街的专栏
05-21 4万+
关于字符集记录下我的理解1.ASCII 码  ：   一字节（8位） 0-127 2.扩展字符集：   一字节（8位） 128-255 3.GB2312（国标） : 2个字节， 我国将127之后的所有字符取消，并规定，一个小于127的字符与原来一样，但当两个都大于127字符连在一起，就表示一个汉字。 也就是2个字节，前一个字节（高字节0XA1 - 0XF7）,后一个字节（低字节0XA1-0XFE）...
GB2312和UTF-8
热门推荐
Jeffrey0000的专栏
09-12 8万+
GB2312简介         GB2312编码范围：A1A1－FEFE，其中汉字编码范围：B0A1-F7FE。         GB2312编码是第一个汉字编码国家标准，由中国国家标准总局1980年发布，1981年5月1日开始使用。GB2312编码共收录汉字6763个，其中一级汉字3755个，二级汉字3008个。同时，GB2312编码收录了包括拉丁字母、希腊字母、日文平假名及片假名字母、俄
模拟django-simple-captcha实现中文验证码、数字及字母验证码、计算题验证码功能
旷古的寂寞的博客
09-29 5119
最近使用django2.0做网站，开发验证码功能时发现对于我的需求，django-simple-captcha有一些多余的功能，所以从它的源代码中提取了一部分加以修改，生成了一个简单的验证码模块。 在使用django-simple-captcha时发现了一个Bug，该库使用HttpResponse.write(image_data)的方式返回验证码图片数据，导致验证码图片无法显示，具体原因还不清...
三国杀移动版武将台词大全-魏
Looking的博客
02-05 2万+
哈哈，今天来干一件傻事，来写写三国杀移动版武将台词大全（写之前也搜了一些，然鹅所谓大全并不全，终究还是错付了，所以不如自力更生），本来准备用 json 格式，但是 yaml 其实看起来更简洁一些（毕竟少了 json 当中的大括号{}，中括号[] 和引号 ""，这也是它比较受欢迎的原因之一）
GB2312-80 汉字机内码
qq_39057568的博客
03-28 7196
《信息交换用汉字编码字符集》是由中国国家标准总局1980年发布，1981年5月1日开始实施的一套国家标准， 标准号是GB 2312—1980。 国标码大全 国标码汉字大全
深度学习&PyTorch 之 RNN-中文多分类
Andy_shenzl的博客
02-28 2315
关于RNN的理论部分我们已经在前面介绍过，所以这里直接上代码 数据是csv格式，只有两列，第一列是标签（但是为中文），第二列是text，文本内容。 当然这里也可以加入停用词我们需要构建和处理文本数据的词汇表。词汇表是自然语言处理中的一个基本概念，它将文本中的单词映射到唯一的整数ID上。这样，文本数据就可以被转换为机器可以理解的数字格式。 创建好的词汇表如下我们之前看到标签是，等文本，需要转换成数值标签 代码中给出了详细的注释，所以就不过多的解释。查看下数据 模型结构 3、 开始训练 完整代码
Domino M-Series 设置说明
rasens的专栏
05-26 1914
Domino M-Series 系列 设置说明
汉字--拼音--网页汉字转拼音--包教包会
liuhao9999的博客
09-07 1万+
"疮": "chuāng","窗": "chuāng","幢": "zhuàng","床": "chuáng","闯": "chuǎng","创": "chuàng","霜": "shuāng","双": "shuāng","桩": "zhuāng","庄": "zhuāng","装": "zhuāng","妆": "zhuāng","撞": "zhuàng","壮": "zhuàng","状": "zhuàng","昌": "chāng","猖": "chāng","场": "chǎng",
2024-03-25 思考-精力管理-记录
技术之路
03-25 884
2024-03-25 思考-精力管理-记录。
用的上的商学课1-50课学习笔记
翾的博客
01-12 4448
机会成本 我们每天都在做选择, 而每个人所拥有的时间, 金钱, 社会资源都是有限的. 所以我们通常为了得到某一样东西, 一般我们都不得不放弃另外一些东西. 在经济学里, 这些不得不放弃的东西, 就是我们为当前选择所付出的机会成本. 有人这样描述机会成本, 鱼与熊掌不可兼得, 那么放弃掉的鱼, 就是你选择熊掌的代价. 了解机会成本, 要记住以下三个词: 所有的选择都有机会成本, 没有例外. 机会成本...
把ICDAR2019-LSVT原始数据集转为REC任务识别数据
Andrwin的博客
10-09 6484
ICDAR2019-LSVT数据集有两个： ①Baidu Research Open-Access Dataset - Introductionhttps://ai.baidu.com/broad/introduction?dataset=lsvt 是包含定位和标记的数据类型 ②飞桨AI Studio - 人工智能学习与实训社区集开放数据、开源算法、免费算力三位一体，为开发者提供高效学习和开发环境、高价值高奖金竞赛项目，支撑高校老师轻松实现AI教学，并助力开发者学习交流，加速落地AI业务场景ht.
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 889
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
使用 uni-app 开发微信小程序的详细指南
最新发布
2301_79685859的博客
09-16 658
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 539
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 300
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 279
js中严格区分大小写。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值