<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery圆形转盘抽奖</title> <script class="jquery library" src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script> </head> <body> <div id="lottery" style="position: absolute; left: 459px; top: 93px"> <img id="imgs" src="images/disc-rotate.gif" viewbox="0 0 352 30" style="position: absolute; left: 47px; top: 47px; width: 352px; height: 352px;" id="imgs" class="image" /> <div class="arrow"> </div> <div class="lot-btn first"> <span></span></div> </div> </body> </html> <style>#lottery { background: url("images/disc-bg.gif?v=79804") no-repeat scroll 0 0 transparent; height: 450px; left: 50px; position: absolute; width: 450px; } #lottery .arrow { background: url("images/arrow.png?v=1bde2") no-repeat scroll 0 0 transparent; height: 191px; left: 207px; position: absolute; top: 91px; width: 32px; } #lottery .lot-btn { height: 92px; left: 177px; overflow: hidden; position: absolute; top: 181px; width: 91px; } #lottery .lot-btn span { cursor: pointer; display: block; height: 92px; position: relative; width: 91px; } #lottery .first span { background: url("images/buttons_01.png?v=8bc8e") no-repeat scroll 0 0 transparent; }</style> <script>$(function() { $(".lot-btn").click(function() { for (var i = 0; i <= 10000; i ) { $("#imgs").rotate({ animateTo: i, duration: 10000 }); if (i >= 3986) { break; } } }) });</script> <div style="text-align:center;clear:both"> </div>
评论