文档章节

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

lotozhou
 lotozhou
发布于 2015/11/23 14:45
字数 448
阅读 157
收藏 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
粉丝 8
博文 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
这次圣诞活动的交互设计,居然踩了这么多坑!

这次圣诞活动的交互设计,居然踩了这么多坑! 优设-UISDC2017-12-241 阅读 教程交互设计 一直在做产品的交互设计,第一次接到做运营活动的设计需求时,内心是兴奋的。不出意料的,踩了不少坑...

优设-UISDC
2017/12/24
0
0
一个简单的功能 写不出 有大神帮下吗??完成能给与一定的报酬。。急

一个抽奖活动 其中加一些小的功能 求大神帮助 抽奖实现了 现在要加个东西 一些需要用户填写的信息 要用户填完信息才能抽奖

wangan110
2016/06/24
441
9
弹幕播放器--ABPlayerHTML5

ABPlayerHTML5是一个在HTML5下的弹幕播放器(同步显示视频于评论)实现。类似功能的播放器可以参考基于Flash的MukioPlayer和PADPlayer。 ABPlayerHTML5使用CommentCoreLibrary作为弹幕核心,...

约翰阿布尼
2014/01/07
7.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

企业级 SpringBoot教程(三)SpringBoot用JdbcTemplates访问Mysql

准备工作 jdk 1.8 maven 3.0 idea mysql 初始化mysql: -- create table `account`DROP TABLE `account` IF EXISTSCREATE TABLE `account` ( `id` int(11) NOT NULL AUTO_INCREMENT,......

itcloud
27分钟前
1
0
事务的作用

1. 什么是事务,为什么使用事务? 一、概念: 1.数据库事务: 数据库事务通常指对数据库进行读或写的一个操作序列。 它的存在包含有以下两个目的: 1、为数据库操作提供了一个从失败中恢复到正常...

gaomq
28分钟前
1
0
Web工程师以太坊入门

我经常构建使用以太坊的Web应用程序,我理所当然地认为每天都使用的是神奇的工具集。我们的生态系统正在迅速发展,我认为很多新人都感到不知所措。以太坊是一项了不起的技术,但它也是新生的...

geek12345
30分钟前
0
0
新蠕虫出现:以Linux和Windows为目标

正如Unit 42研究团队所详述的那样,名为Xbash的新恶意软件系列与Iron Group有关,Iron Group是一个以前知道可以执行勒索软件攻击的威胁行为者,显然已经转向更复杂的攻击媒介。 据观察,Xba...

linux-tao
33分钟前
0
0
Mask 动画

前言:很多动效都是多种动画的组合,有时候你可能只是需要其中某个动画,但面对庞杂的代码库或是教程,你可能比较困惑,本系列将复杂动效中不常见的动画效果拆解出来便于学习,授人以鱼不如授...

walking_yxf
34分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部