分享一段代码实例，它实现了九宫格抽奖效果。
代码实例如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>搞代码</title> <style type="text/css"> img { width: 20px; height: 16px; } .active { border: red 1px solid; background: red; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> var width = 8; var height = 8; var dirs = ["left", "right", "up", "down"] var dir = { left: function (x, y) { return { x: x == 0 ? width - 1 : x - 1, y: y } }, right: function (x, y) { return { x: x == width - 1 ? 0 : x + 1, y: y } }, up: function (x, y) { return { x: x, y: y == 0 ? height - 1 : y - 1, } }, down: function (x, y) { return { x: x, y: y == height - 1 ? 0 : y + 1, } } } var times = ((Math.random() * 500) >>> 0) + 50; var pos = { x: (Math.random() * width) >>> 0, y: (Math.random() * height) >>> 0, } function next(i) { $("tr:nth-child(" + (pos.x + 1) + ") td:nth-child(" + (pos.y + 1) + ")").removeClass("active"); pos = dir[dirs[(Math.random() * 4) >>> 0]](pos.x, pos.y); $("tr:nth-child(" + (pos.x + 1) + ") td:nth-child(" + (pos.y + 1) + ")").addClass("active"); if (times-- < 0) { return; } setTimeout(next, i - 1); } window.onload = function () { next(50); } </script> </head> <body> <table border="" cellspacing="" cellpadding=""> <tr> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> </tr> <tr> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> </tr> <tr> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> </tr> <tr> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> </tr> <tr> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> </tr> <tr> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> </tr> <tr> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> </tr> <tr> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> <td><img src="" alt="" /></td> </tr> </table> </body> </html> |
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery实现九宫格抽奖效果代码实例
转载请注明原文链接：jQuery实现九宫格抽奖效果代码实例
