文档章节

html5+css3实现抽奖活动的效果

lotozhou
 lotozhou
发布于 2015/11/23 14:45
字数 448
阅读 172
收藏 4

        看过我博客的知道,前几天我发过一个通过form表单来实现和用户交互效果,上次是通关过table实现用户注册页面,那么今天我们也是通过table的表单效果来画出抽奖的页面,通过css3和javascript的动画效果来实现抽奖的一系列动作。

        通过css3+html5把抽奖的页面画出来,再通过javascript函数让它动起来。

具体代码奉上:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>抽奖</title>


<style>

body{ background-image:url(images/bg.png);}

table{color:#FFF; margin:auto; margin-top:40px;}

table tr td{width:110px; height:110px; background-color:#fff;}

div.button{width:150px; height:40px; background-color:rgb(106,38,19); display:inline-block; position:relative; top:80px; border-radius:8px; line-height:40px; font-family:'microsoft yahei'; }

div.button:hover{ cursor:pointer; background-color:#481305;}

div.target{ background-image:url(images/target.png); width:114px; height:114px; position:absolute;top:0px; left:0px;

}

</style>

</head>


<body>

<table border="0px" cellpadding="0" cellspacing="1">

    <tr>

        <td id="0" background="images/0.jpg"></td>

            <td id="1"  background="images/1.jpg"></td>

            <td id="2" background="images/2.jpg"></td>

            <td id="3" background="images/3.jpg"></td>

            <td id="4"  background="images/4.jpg"></td>

            <td id="5"  background="images/5.jpg"></td>

            <td id="6"  background="images/6.jpg"></td>

        </tr>

        <tr>

        <td id="7"   background="images/7.jpg"></td>

            <td colspan="5" rowspan="3" background="images/center.jpg" style="text-align:center";>

            <div class="button" onClick="startRun()">开始抽奖</div>

                <div class="button" onClick="init()">重&nbsp;&nbsp;&nbsp;&nbsp;置</div>

            </td>

            <td id="8" background="images/8.jpg"></td>

        </tr>

        <tr>

        <td id="9"  background="images/9.jpg"></td>

            <td id="10"   background="images/10.jpg"></td>

        </tr>

         <tr>

        <td id="11"  background="images/11.jpg"></td> 

            <td id="12"   background="images/12.jpg"></td>

        </tr> 

        <tr>

        <td id="13"   background="images/13.jpg"></td>

            <td id="14"   background="images/14.jpg"></td>

            <td id="15"   background="images/15.jpg"></td>

            <td id="16"   background="images/16.jpg"></td>

            <td id="17"   background="images/17.jpg"></td>

            <td id="18"   background="images/18.jpg"></td>

            <td id="19"   background="images/19.jpg"></td>

        </tr>

    </table>

    <div class="target"></div>

<script type="text/javascript" src="js/jquery-1.11.1.min1.js"></script>

    <script type="text/javascript" src="js/game.js"></script>

</body>

</html>

© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
jquery.rotate插件实现抽奖的旋转效果

jquery.rotate插件实现抽奖的旋转效果 效果描述: 正好最近公司在做一个抽奖的效果 年底了,各大电商类的网站都要搞个促销活动,然后抽奖 这是一款用jquery.rotate.js旋转插件实现的动画效果...

wybo521
2016/01/17
110
0
微信营销系统(第三方微信平台)github 开源

升讯威微信营销系统(微信第三方平台) 在线体验:http://wxcm.eeipo.cn/ 开源地址:https://github.com/iccb1013/Sheng.WeixinConstruction 说明:有问题上QQ群交流 QQ群:173459027 作者最...

突破666
07/31
0
0
在微信上呈现大转盘抽奖活动(很简单,速来捡钱)

大转盘是一种抽奖活动类型,本项目要求开发一套界面美观,配置灵活,逻辑严谨的大转盘抽奖活动,主要用于通过微信公众号推广此活动,实现网站用户注册。基本要求如下: 1. 抽奖活动的项目可通...

xl123666
2016/01/25
4
0
在微信上呈现大转盘抽奖活动(很简单,速来捡钱)

大转盘是一种抽奖活动类型,本项目要求开发一套界面美观,配置灵活,逻辑严谨的大转盘抽奖活动,主要用于通过微信公众号推广此活动,实现网站用户注册。基本要求如下: 1. 抽奖活动的项目可通...

xl123666
2016/01/23
6
0
2017-02-20

学习内容:angular.js依赖注入及mvvm模式 完成内容:农历商城签到抽奖活动后台数据查询显示列表功能 工作问题:列表显示问题 主要原因不显示是Controller.js代码错误 和MappingKit,Controll...

Full_Session
2017/02/20
1
0

没有更多内容

加载失败,请刷新页面

加载更多

一个本科学生对Linux的认知

一个本科学生对Linux的认知 我是一名大三的普通一本大学的软件工程的一名学生,学校开设了一些关于系统开发的课程,纸上得来终觉浅,学校的课程课时较短,想要在56个课时之内学会一些公司需要...

linuxCool
21分钟前
0
0
CentOS 安装Tomcat

Tomcat 介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Java 程序写的网站用tomcat+jdk来运...

野雪球
35分钟前
0
0
OSChina 周四乱弹 —— 每天都迟到是种什么样的体验

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席机器人 :《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 ...

小小编辑
40分钟前
213
9
jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部