jquery抽奖信息九宫格

「已注销」

于 2022-11-09 12:34:50 发布

阅读量96

点赞数

文章标签： jquery css javascript

本文链接：https://blog.csdn.net/stationinthemind/article/details/127767497

版权

这是一个使用jQuery和CSS实现的九宫格抽奖页面示例。页面中包含一个九宫格布局，每个格子有不同的奖项显示。点击开始按钮，格子会随机变换背景颜色模拟抽奖过程，再次点击停止按钮后，显示中奖的格子。页面还包含了一个关闭弹窗的按钮以及一些样式定义。

摘要由CSDN通过智能技术生成

<#include "/wap/include/_layout_head.html">
<@layout_head>
<title>幸运九宫格</title>

</@layout_head>
<#include "/wap/include/_layout_nav.html">


<style type="text/css">
        a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{
            margin: 0;
            border: 0;
            padding: 0;
            font-style: normal;
            color: #323232;
            box-sizing: border-box;
            -moz-box-sizing:border-box; /* Firefox */
            -webkit-box-sizing:border-box; /* Safari */
        }
        html,body{
            background: #fff;
        }
        ul{
            width: 320px; 
            margin:20px auto;
            text-decoration: none;
            list-style-type: none;
            padding-bottom: 1%;
        }
        ul:after{
            content: "";
            display: block;
            width: 100%;
            height: 0;
            clear: both;
        }
        .video_list{
            margin:0 auto; 
            width:320px;
            height:294px;
            /* background:url('${ossPath!''}/upload/basActivity/12/wk.png') */
        }
        .video_list>li{
            float: left;
            width: 95px;
            text-align: center; 
            padding-top: 91px;
            margin-left: 0px;
            margin-top: 0px;
            position: relative;
            /* border-radius: 5px; */
            
        }
        .video_list>li>div{
            position: absolute;
            left: 0;
            top: 0;
            width:95px; 
            height:91px;
            background:url('${ossPath!''}/upload/basActivity/12/jgg1.png');
        }
        .video_list>li>div>span{
            display: inline-block;   
            margin-top:30px;
            line-height:20px;
            width:80%;
        }
        #btnwrap{
            width: 70%;
            margin:10px auto;
            text-align: center;

        }
        #btnwrap input{
            width: 100%;
            height: 35px;
            margin-bottom: 10px;
            border-radius: 5px;
            border:1px solid orange;
            bac