jquery实现老虎机摇奖抽奖效果代码-html代码-BFW代码库

代码语言：html

所属分类：电商

代码描述：jquery实现老虎机摇奖抽奖效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">

    <script type="text/javascript" >
        function fontSize(){var a=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;document.documentElement.style.fontSize=(a/25)+"px"}fontSize();window.onresize=fontSize;
    </script>
    <style>
        html {
        font-family: "microsoft yahei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
    
    html,body {
        -webkit-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
        font-weight: normal;
        box-sizing: border-box;
    }
    
    a {
        text-decoration: none;
        -webkit-touch-callout: none;
        background-color: transparent;
    }
    
    li {
        list-style: none;
    }
    
    article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
        display: block;
    }
    
    audio,canvas,progress,video {
        display: inline-block;
    }
    
    audio:not([controls]) {
        display: none;
        height: 0;
    }
    
    [hidden],template {
        display: none;
    }
    
    a:active,a:hover {
        outline: 0;
    }
    
    abbr[title] {
        border-bottom: 1px dotted;
    }
    
    b,strong {
        font-weight: bold;
    }
    
    dfn {
        font-style: italic;
    }
    
    i {
        font-style: normal;
    }
    
    h1 {
        font-size: 2em;
        margin: .67em 0;
    }
    
    small {
        font-size: 80%;
    }
    
    sub,sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    
    sup {
        top: -0.5em;
    }
    
    sub {
        bottom: -0.25em;
    }
    
    img {
        border: 0;
        -webkit-touch-callout: none;
        max-width: 100%;
    }
    
    svg:not(:root) {
        overflow: hidden;
    }
    
    figure {
        margin: 0;
        padding: 0;
    }
    
    hr {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
    }
    
    pre {
        overflow: auto;
    }
    
    code,kbd,pre,samp {
        font-family: monospace,monospace;
        font-size: 1em;
    }
    
    a,button,optgroup,select,textarea {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    button,input,optgroup,select,textarea {
        color: inherit;
        font: inherit;
        margin: 0;
        outline: none;
        line-height: normal;
    }
    
    button {
        overflow: visible;
        border: none;
    }
    
    button,select {
        text-transform: none;
    }
    
    button,html input[type="button"],input[type="reset"],input[type="submit"] {
        -webkit-appearance: button;
        cursor: pointer;
    }
    
    button[disabled],html input[disabled] {
        cursor: default;
    }
    
    button::-moz-focus-inner,input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    
    input {
        line-height: normal;
    }
    
    input[type="checkbox"],input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
    }
    
    input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
        height: auto;
    }
    
    input[type="search"] {
        -webkit-appearance: textfield;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
    
    input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    
    fieldset {
        border: 1px solid silver;
        margin: 0 2px;
        padding: .35em .625em .75em;
    }
    
    legend {
        border: 0;
        padding: 0;
    }
    
    textarea {
        overflow: auto;
    }
    
    optgroup {
        font-weight: bold;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    td,th {
        padding: 0;
    }
    
    body,.big-bg {
        margin: 0 auto;
        position: relative;
        overflow-x: hidden;
        width: 100%;
        max-width: 768px;
        background-color: #f2f2f2;
    }
    
    .clearfix:after,.clearfix:before {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    
    .clearfix {
        *zoom:1;}
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    .green {
        color: #16cb67;
    }
    
    .draw-green {
        color: #14972d;
    }
    
    .red {
        color: #f74646;
    }
    
    .black {
        color: #323232;
    }
    
    .light-black {
        color: #434343;
    }
    
    .thin-black {
        color: #a7a7a7;
    }
    
    .light-blue {
        color: #1ec8f0;
    }
    
    .blue {
        color: #0090ff;
    }
    
    .through-line {
        color: #989898;
        text-decoration: line-through;
    }
    
    .gery {
        color: #666;
    }
    
    .gery-l {
        color: #a5a5a5;
    }
    
    .orange {
        color: #ffae00;
    }
    
    .padding {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    
    .margin {
        margin-right: 1rem;
        margin-left: 1rem;
    }
    
    .big-bg {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        margin: auto;
        background-color: rgba(0,0,0,0.65);
        height: 100%;
        z-index: 10000;
    }
    
    .company-say {
        color: #989898;
        font-size: .8rem;
        width: 78%;
        line-height: 1.2rem;
        margin: 1.2rem auto;
    }
    body {
        background-color: #e6faff;
    }
    
    .com-main {
        position: relative;
        width: 100%;
    }
    
    .com-main .title {
        width: 100%;
        background-repeat: no-repeat;
        background-position: right center;
        height: 7.56666667rem;
        background-image: url("//repo.bfw.wiki/bfwrepo/images/laohuji/compound-zi.png");
        background-size: 19.46666667rem 100%;
        margin-top: 2.7rem;
    }
    
    .com-main .coin {
        position: absolute;
        left: .8rem;
        top: 6.6rem;
        z-index: 2;
    }
    
    .com-main .coin li {
        width: 4.33333333rem;
        height: 4.33333333rem;
        border: 1px dashed #ff9c1b;
        background-color: #fffae4;
        border-radius: 4.2rem;
        margin: .4rem 0;
        padding: .4rem;
        overflow: hidden;
        background-size: 1.13333333rem 1.13333333rem;
        background-repeat: no-repeat;
        background-position: center 2.7rem;
    }
    
    .com-main .coin li h3 {
        margin-top: .2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #f74646;
        text-align: center;
        width: 100%;
        height: 1.5rem;
        line-height: 1.5rem;
        font-weight: bolder;
        font-size: .93333333rem;
    }
    
    .com-main .coin li.gb {
        background-image: url("//repo.bfw.wiki/bfwrepo/images/laohuji/compound-gangbeng@2x.png");
    }
    
    .com-main .coin li.jd {
        background-image: url("//repo.bfw.wiki/bfwrepo/images/laohuji/compound-jingdou@2x.png");
    }
    
    .com-main .slots {
        position: relative;
        background-image: url("//repo.bfw.wiki/bfwrepo/images/laohuji/c.........完整代码请登录后点击上方下载按钮下载查看