文档章节

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

lotozhou
 lotozhou
发布于 2015/11/23 14:45
字数 448
阅读 143
收藏 4
点赞 0
评论 0

        看过我博客的知道,前几天我发过一个通过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 ⋅ 0

纯CSS3带动画效果导航菜单

随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3。网页能表达的东西越来越多,css3兴起已经很...

流浪老三 ⋅ 2013/09/14 ⋅ 0

这次圣诞活动的交互设计,居然踩了这么多坑!

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

优设-UISDC ⋅ 2017/12/24 ⋅ 0

开源中国马年献礼,Git@OSC 抽奖赢 iPad !

新年伊始,万象更新,为回馈过去一年里,众网友对开源中国的支持,推出轮盘抽奖活动。 具体活动规则如下: Git@OSC的用户由下面列出的获取抽奖机会规则抽奖 获取抽奖机会规则: 每天登陆,并打...

oschina ⋅ 2014/01/02 ⋅ 83

一个简单的功能 写不出 有大神帮下吗??完成能给与一定的报酬。。急

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

wangan110 ⋅ 2016/06/24 ⋅ 9

如何快速搭建微信营销

微官网:快速帮用户打造超炫微信移动网站 “微商城”(又名Vshop)是由上海晖硕信息科技有限公司推出的,一款基于移动互联网的商城应用服务产品,以时下最热门的互动应用微信为媒介,配合微信...

VIICMS ⋅ 2014/03/24 ⋅ 0

[分享] 来,做一个问卷调查(有抽奖!)

前言 “小王,明天公司在***举办一个xxx产品发布会,你今天准备2000份问卷调查。还有,我们这次还做一个抽奖活动,也记得弄一个抽奖箱和一些抽奖球哦。” …… 活动结束了,小王想起早上捧着...

没错就是酱紫 ⋅ 2016/07/28 ⋅ 0

幸运大转盘-jQuery+PHP实现的抽奖程序

目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的...

蜗牛奔跑 ⋅ 2015/07/06 ⋅ 0

用手机 App 发动弹,送开源内裤喽!

从7月30日 - 8月10日之内用 开源中国App 发动弹的用户就有机会赢取一条开源内裤! 您发布的动弹要满足以下条件才能参与抽奖: 请使用 手机App 来发布。 发布的动弹请不要涉及黄色,政治,毒品...

oschina ⋅ 2012/07/30 ⋅ 205

弹幕播放器--ABPlayerHTML5

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

约翰阿布尼 ⋅ 2014/01/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 35分钟前 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 42分钟前 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 45分钟前 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 47分钟前 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 48分钟前 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 52分钟前 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 今天 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 今天 ⋅ 0

vim介绍、vim颜色显示和移动光标、vim一般模式下移动光标、一般模式下复制粘贴剪切

VIM Vim 是 UNIX 文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff),语法高亮,全面的帮助系统,本地脚本(Vimscript),和便于选择的...

蛋黄Yolks ⋅ 今天 ⋅ 0

springboot+mockito测试controller层遇到的问题

使用MockitoJUnitRunner测试的一个例子,原来报错无法找到bean, 类似的异常如下:createBeanError..... 原因:是因为@Runwith使用了SpringRunner,应该修改为MockitoJUnitRunner 代码如下: ...

writeademo ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部