jquery跑马灯抽奖

来源：互联网发布：2015淘宝销量排名编辑：程序博客网时间：2024/05/17 06:03

<!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;}

0 0