jquery跑马灯抽奖

原创 2016年06月01日 21:53:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>抽奖</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
    <table id="game">
    	<tbody>
    		<tr>
    			<td id="0">
    			<img src="images/0.jpg"></td>
    			<td  id="1">
    				<img src="images/19.jpg">
    			</td>
    			<td  id="2">
    				<img src="images/1.jpg">
    			</td>
    			<td  id="3">
    				<img src="images/2.jpg">
    			</td>
    			<td  id="4">
    				<img src="images/3.jpg">
    			</td>
    			<td  id="5">
    				<img src="images/4.jpg">
    			</td>
    			<td  id="6">
    				<img src="images/5.jpg">
    			</td>
    		</tr>
    		<tr>
    			<td id="19">
    				<img src="images/6.jpg">
    			</td>
    			<td colspan="5" rowspan="3" class="centerImg">
    				<button class="start" id="begingame">开始抽奖</button>
    				<button class="reset">
    					重置
    				</button>
    			</td>
    			<td id="7">
    			<img src="images/7.jpg">
    			</td>
    		</tr>
    		<tr>
    			<td id="18">
    			<img src="images/8.jpg"></td>
    			<td id="8">
    				<img src="images/9.jpg">
    			</td>
    		</tr>
    		<tr>
    			<td id="17">
    				<img src="images/10.jpg">
    			</td>
    			<td id="9">
    				<img src="images/11.jpg">
    			</td>
    		</tr>
    		<tr>
    			<td id="16">
    				<img src="images/12.jpg">
    			</td>
    			<td id="15">
    				<img src="images/13.jpg">
    			</td>
    			<td id="14">
    				<img src="images/14.jpg">
    			</td>
    			<td id="13">
    				<img src="images/15.jpg">
    			</td>
    			<td id="12">
    				<img src="images/16.jpg">
    			</td>
    			<td id="11">
    				<img src="images/17.jpg">
    			</td>
    			<td id="10">
    				<img src="images/18.jpg">
    			</td>
    		</tr>
    	</tbody>
    </table>
    <div class="bingo" id="bingo"></div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
		var lastobj=null,
				loop=null,
				howcicle=0;
			$(function(){
				var firsttd=$("#game").find("td").eq(0);
					lastobj=firsttd;
				binggouposition(firsttd)
				$(window).resize(function(){
					binggouposition(lastobj);
				});
				$("#begingame").click(function(){
					move(100);
				});
			});
			function getOffset ($obj){
			var current=$obj.offset(),
				 top=current.top,
				 left=current.left,
				 offset={
					left: left,
					 top: top
				 };
				return offset;
			}
			function binggouposition(curtr) {
				offsetobj=getOffset (curtr);
				$("#bingo").css({"left": offsetobj.left,"top": offsetobj.top});
			}
			function move(speed){
				var randomcircle=60+Math.random(10)*20;
				loop=setInterval(function(){
					var position=getOffset($("#"+howcicle%20));
					 $("#bingo").css({"top": position.top,"left": position.left});
					 howcicle++;
					if(howcicle>=randomcircle){
						stop();
						howcicle=howcicle%20;
						console.log(howcicle);
						lastobj=$("#"+(howcicle-1));
					}
				},speed);
			}
		 	function stop(){
				clearInterval(loop);
			}
    </script>
</body>
</html>

以下是css代码:

* {
  margin: 0;
  padding: 0;
}
body {
  font: 12px/1.4 'microsoft yahei';
}
table {
  min-width: 776px;
  border-spacing: 0;
  border-collapse: collapse;
  margin: 0 auto;
}
table tr td.centerImg {
  background: url(../images/center.jpg) no-repeat center center;
  text-align: center;
}
table tr td.centerImg button {
  background: #6a2613;
  color: #fff;
  width: 150px;
  height: 40px;
  line-height: 40px;
  border-radius: 3px;
  border: none;
  position: relative;
  top: 100px;
}
table tr td.centerImg button:hover {
  background: #481305;
}
table td {
  width: 110px;
  height: 110px;
  border: 1px solid #000;
}
img {
  border: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.bingo {
  background: url(../images/target.png) no-repeat center center;
  width: 110px;
  height: 110px;
  position: absolute;
  top: 0;
  left: 0;
}


版权声明: 千里之行,始于足下!

JavaScript 实现跑马灯抽奖效果

实现效果如图:代码如下: js跑马灯抽奖效果 *{ margin: 0; padding: 0; font-size:12px; } body{ backgro...
  • chen_gong1992
  • chen_gong1992
  • 2016年11月22日 13:52
  • 839

JavaScript “跑马灯”抽奖活动代码解析与优化(一)

最近的项目中做了一个“跑马灯”的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在写这篇文章的时候,也顺便把自己的代码重构了...
  • yisuowushinian
  • yisuowushinian
  • 2016年02月15日 17:03
  • 3824

jquery实现跑马灯抽奖效果(css js 很全哟)

  • 2016年11月08日 16:22
  • 79KB
  • 下载

jquery实现酷炫的抽奖器效果

请在这里查看示例 ☞ award示例使用介绍 可以自定义行、列数以及每次选中的个数 点击初始化按钮,即可加载功能,点击开始抽奖进行第一次抽奖 已抽过的用户不会再被抽到 源码示例 ...
  • u011500781
  • u011500781
  • 2017年01月16日 13:11
  • 711

jquery跑马灯抽奖

抽奖 ...
  • wuzhe128520
  • wuzhe128520
  • 2016年06月01日 21:53
  • 232

jquery实现数字抽奖

  • 2015年12月07日 09:32
  • 61KB
  • 下载

用js实现跑马灯抽奖效果

START /*以上是body部分,下面为js实现部分*/var seed ...
  • u010543271
  • u010543271
  • 2016年03月15日 13:17
  • 2088

JavaScript “跑马灯”抽奖活动代码解析与优化(二)

既然是要编写插件。肯定会有一些功能的需求。 功能需求: 1.能够控制灯的自动播放 2.灯的旋转方向 3.灯的旋转速度 4.奖品的旋转速度...
  • yisuowushinian
  • yisuowushinian
  • 2016年02月15日 17:04
  • 1872

jquery 文字跑马灯

  • 2010年09月20日 19:02
  • 28KB
  • 下载

jquery+CSS3做的走马灯(跑马灯)效果

  • 2017年11月28日 14:45
  • 6KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery跑马灯抽奖
举报原因:
原因补充:

(最多只允许输入30个字)