用用jQuery旋旋转转插插件件jqueryrotate制制作作转转盘盘抽抽奖奖
本文实例为大家分享了j Query旋转插件j queryrotate制作转盘抽奖的具体代码,供大家参考,具体内容 下
原文链接:j s HT ML5 Canvas绘制转盘抽奖
下载地址:j queryrotate
抽奖转盘
< mg class="po nter" src=" mages/wheel-po nter.png" />
jason
/*初始化样式*/
body,
ul,
ol,
l ,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
f eldset,
table,
td,
mg,
d v {
marg n: 0;
padd ng: 0;
border: 0;
}
ul,
ol {
l st-style-type: none;
}
select,
nput,
mg,
select {
vert cal-al gn: m ddle;
}
a {
text-decorat on: none;
color: #000;
}
a:hover {
color: #c00;
text-decorat on: none;
}
.clear {
clear: both;
}
nput {
font-s ze: 12px;
}
body {
color: #333;
font-s ze: 12px;
font-fam ly: "M crosoft YaHe ";
background: #e62d2d;
background: greenyellow;
overflow-x: h dden;
}
/* 大转盘样式 */
.content {
d splay: block;
w dth: 95%;
/*居中显示*/
marg n: 30px auto;
}
.content .wheel {
d splay: block;
w dth: 100%;
pos t on: relat ve;
/*转盘的背景*/
background- mage: url(../ mages/wheel-bg.png);
background-s ze: 100% 100%;
}
.content .wheel canvas. tem {
w dth: 100%;
}
.content .wheel mg.po nter {
pos t on: absolute;
w dth: 31.5%;
he ght: 42.5%;
left: 34.3%;