九宫格转盘抽奖

1000 5月前 498


简介


抽奖效果有很多种,常见的有转盘、九宫格、随机码等等,本站之前做过几个转盘抽奖的例子(百度、机锋、QQ音乐),今天来做一个九宫格的效果。


制作方法


1、首先制作九宫格转盘,HTML、CSS 和 JavaScript 分别如下:


HTML:

<div class="draw" id="lottery">

    <table>

        <tr>

            <td class="item lottery-unit lottery-unit-0">

                <div class="img">

                    <img src="images/img1.png" alt="">

                </div>

                <span class="name">虚拟主机 1元/年</span>

            </td>

            <td class="gap"></td>

            <td class="item lottery-unit lottery-unit-1">

                <div class="img">

                    <img src="images/img2.png" alt="">

                </div>

                <span class="name">VPS 1元/30天</span>

            </td>

            <td class="gap"></td>

            <td class="item lottery-unit lottery-unit-2">

                <div class="img">

                    <img src="images/img3.png" alt="">

                </div>

                <span class="name">.top域名 1元/年</span>

            </td>

        </tr>

        <tr>

            <td class="gap-2" colspan="5"></td>

        </tr>

        <tr>

            <td class="item lottery-unit lottery-unit-7">

                <div class="img">

                    <img src="images/img4.png" alt="">

                </div>

                <span class="name">免费主机1年</span>

            </td>

            <td class="gap"></td>

            <td class=""><a class="draw-btn" href="javascript:">立即抽奖</a></td>

            <td class="gap"></td>

            <td class="item lottery-unit lottery-unit-3">

                <div class="img">

                    <img src="images/img5.png" alt="">

                </div>

                <span class="name">.com域名 19元/年</span>

            </td>

        </tr>

        <tr>

            <td class="gap-2" colspan="5"></td>

        </tr>

        <tr>

            <td class="item lottery-unit lottery-unit-6">

                <div class="img">

                    <img src="images/img7.png" alt="">

                </div>

                <span class="name">.com域名 19元/年</span>

            </td>

            <td class="gap"></td>

            <td class="item lottery-unit lottery-unit-5">

                <div class="img">

                    <img src="images/img6.png" alt="">

                </div>

                <span class="name">CDN加速 10元/15天</span>

            </td>

            <td class="gap"></td>

            <td class="item lottery-unit lottery-unit-4">

                <div class="img">

                    <img src="images/img8.png" alt="">

                </div>

                <span class="name">20元快云币</span>

            </td>

        </tr>

    </table>

</div>

站兄可以做成插件么?

最新回复 (1)
返回
发新帖