jquery摇号抽奖交互效果
代码语言:html
所属分类:大转盘
代码描述:jquery摇号抽奖交互效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>大转盘活动</title>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/awardRotate.min.js"></script>
<style>
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0}body{color:#333;font-size:12px;font-family:microsoft yahei}ul,ol{list-style-type:none}select,input,img,select{vertical-align:middle}input{font-size:12px}a{text-decoration:none;color:#000}a:hover{color:#c00;text-decoration:none}.clear{clear:both}.banner{display:block;width:95%;margin-left:auto;margin-right:auto;margin-bottom:20px;margin-top:50px}.banner .turnplate{display:block;width:100%;position:relative}.banner .turnplate canvas.item{width:100%}.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%}
</style>
<script type="text/javascript">
var turnplate={
restaraunts:[], //大转盘奖品名称
colors:[], //大转盘奖品区块对应背景颜色
outsideRadius:192, //大转盘外圆的半径
textRadius:155, //大转盘奖品位置距离圆心的距离
insideRadius:68, //大转盘内圆的半径
startAngle:0, //开始角度
bRotate:false //false:停止;ture:旋转
};
$(document).ready(function(){
//动态添加大转盘的奖品与奖品区域背景颜色
turnplate.restaraunts = ["50M免费流量包", "10积分", "谢谢参与", "50积分", "20积分", "谢谢参与"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];
var rotateTimeOut = function (){
$('#wheelcanvas').rotate({
angle:0,
animateTo:2160,
duration:8000,
callback:function (){
alert('网络超时,请检查您的网络设置!');
}
});
};
//旋转转盘 item:奖品位置; txt:提示语;
var rotateFn = function (item, txt){
va.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0