标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery转盘抽奖活动代码</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.rotary{position:relative;width:854px;height:504px;margin:50px auto 0 auto;background:#d71f2e url(images/bg1.png);}
.rotaryArrow{position:absolute;left:181px;top:104px;width:294px;height:294px;cursor:pointer;background-image:url(images/arrow.png);}
.list{position:absolute;right:48px;top:144px;width:120px;height:320px;overflow:hidden;}
.list h3{display:none;}
.list li{height:37px;font:14px/37px "Microsoft Yahei";color:#ffea76;text-indent:25px;background:url(images/user.png) 0 no-repeat;}
.result{display:none;position:absolute;left:130px;top:190px;width:395px;height:118px;background-color:rgba(0,0,0,0.75);filter:alpha(opacity=90);}
.result a{position:absolute;right:5px;top:5px;width:25px;height:25px;text-indent:-100px;background-image:url(images/close.png);overflow:hidden;}
.result p{padding:45px 15px 0;font:16px "Microsoft Yahei";color:#fff;text-align:center;}
.result em{color:#ffea76;font-style:normal;}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
<!-- Demo start -->
<div class="rotary">
<div class="rotaryArrow" id="rotaryArrow"></div>
<div class="list">
<ul id="li">
</ul>
</div>
<script type="text/javascript">
$.ajax({
type:‘POST‘,
url:‘test1.php‘,
dataType: ‘json‘,
data:[‘li‘],
cache:false,
error: function(){
alert(‘出错了！‘);
return false;
},
success: function(json){
var list = ‘‘;
for(var o in json){
list += json[o];
}
$("#li").html(list);
}
});
</script>
<script type="text/javascript">
$(function(){
var $this = $(".list");
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer = setInterval(function(){
scrollNews( $this );
}, 1200 );
}).trigger("mouseout");
});
function scrollNews(obj){
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").height();
$self.animate({ "margin-top" : -lineHeight +"px" },500 , function(){
$self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
})
}
</script>
<script type="text/javascript">
$(function(){
$("#rotaryArrow").click(function(){
lottery();
});
});
function lottery(){
$.ajax({
type: ‘POST‘,
url: ‘test.php‘,
dataType: ‘json‘,
cache: false,
error: function(){
alert(‘出错了！‘);
return false;
},
success:function(json){
$("#rotaryArrow").unbind(‘click‘).css("cursor","default");
var a = json.angle; //角度
var p = json.prize; //奖项
$("#rotaryArrow").rotate({
duration:3000, //转动时间
angle: 0,
animateTo:1800+a, //转动角度
easing: $.easing.easeOutSine,
callback: function(){
var con = confirm(‘恭喜你，中得‘+p+‘\n还要再来一次吗？‘);
if(con){
lottery();
}else{
return false;
}
}
});
}
});
}
</script>
</body>
</html>
我的转盘抽奖差不多完事了.给你们一个源码吧.希望能用得上的人直接摘去.
标签：
原文地址：http://www.cnblogs.com/lolplice/p/4512445.html
