jquery实现一个老虎机抽奖效果代码

代码语言:html

所属分类:游戏

代码描述:jquery实现一个老虎机抽奖效果代码

代码标签: 老虎机 抽奖 效果

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

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <style>
        * {
        padding: 0;
        margin: 0
    }
    body{
        padding: 200px;
    }
    .tigerBg {
        width: 640px;
        height: 100%;
        min-height: 860px;
        max-height: 1136px;
        background: url("//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/lottery_draw.png");
        position: absolute;
    }
    
    .play {
        width: 516px;
        height: 126px;
        background: url("//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/play.png");
        position: absolute;
        top: 615px;
        left: 70px;
        border: none;
    }
    :focus{
        outline: 0;
    }
    .num_box {
        height: 410px;
        width: 460px;
        overflow: hidden;
        text-align: center;
        position: absolute;
        top: 210px;
        left: 90px;
    }
    
    .tiger {
        background: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/tiger.png);
        width: 150px;
        height: 410px;
        float: left;
    }
    
    .num_box .tiger:nth-child(1) {
        margin-left: 0px;
    }
    
    .num_box .tiger:nth-child(2) {
        margin-left: 5px;
        background: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/tiger1.png)
    }
    
    .num_box .tiger:nth-child(3) {
        margin-left: 5px;
        background: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/laohuji/tiger2.png)
    }
    
    .tigerTxt {
        background: #DE141D;
        width: 475px;
        height: 80px;
        position: absolute;
        left: 85px;
        top: 165px;
        z-index: 10;
        text-align: center;
        line-height: 80px;
        color: #ffffff;
        font-size: 29px;
        font-weight: 900;
    }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.easing.1.3.min.js"></script>
</head>

<body>
    <div class="tigerBg">
        <div class="tigerTxt">您有<span>*</span>次抽奖机会.........完整代码请登录后点击上方下载按钮下载查看

网友评论0