<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script class="jquery library" src="./jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./jQueryRotate.2.2.js"></script>
</head>
<body>
<div id="lottery"><img id="imgs" src="./disc-rotate.gif" viewbox="0 0 352 30" style="position: absolute; left: 47px; top: 47px; width: 352px; height: 352px;" class="image">
<div class="arrow"></div>
<div class="lot-btn first">
<span></span>
</div>
</div>
<style>#lottery {
background: url("./disc-bg.gif") no-repeat scroll 0 0 transparent;
height: 450px;
left: 50px;
position: absolute;
width: 450px;
}
#lottery .arrow {
background: url("./arrow.png") 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("./buttons_01.png") 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>
</body></html>
|
