html页面转盘如何实现,css3+jquery+html实现转盘效果

html>

转盘

GO

$(function(){

//用于判断转盘是否再转防止重复点击触发重复调用

var stop=true;

//设置一个全局的初始转动间隔时间

//递归调用时该时间会不断变大

var inital_sp=3;

//该方法进行了递归调用

function circle(sp,cut,step,amount){

//变量i为转动的角度增量

var i = 0;

//参数sp表示第一次执行circle方法时的转动间隔时间

//参数cut用于指定执行circle方法转动的圈数(除最后一次)

var deg = cut * 360;

//参数step表示下一次执行circle方法时的转动间隔时间是在上一次的基础上加step

//即转动间隔时间增量(从而实现越转越慢)

//参数amount表示circle方法的递归调用次数

//变量slowest表示最后一次执行circle方法时的转动间隔时间

//主要用于停止递归调用时的判断

var slowest = inital_sp + step * amount;

if (sp + step > slowest) {

//最后一次执行circle方法时，转动的角度(这是通过随机数计算出的随机角度);

deg = (Math.floor(Math.random() * 100000) % 10) * 40 + 360;

}

var inter = setInterval(function () {

$(".ct_go").css("transform", "rotate(" + i + "deg)");

i += 5;

//circle方法执行结束的判断

if (i >= deg) {

clearInterval(inter);

//是否进行递归调用的判断

if (sp + step <= slowest) {

circle(sp + step,cut, step,amount);

}else{

stop=true;

}

}

}, sp);

}

$(".ct_go").click(function(){

if(stop){

stop=false;

circle(inital_sp,2,3,5);

}

});

});

@charset "utf-8";

body {

font-family: 黑体;

-webkit-font-smoothing: antialiased;

background-color: #f4f4f5;

}

.container-fluid {

padding: 0;

}

.row {

margin: 0;

}

.col-xs-12 {

padding: 0;

}

@keyframes mycircle {

0% {

transform: rotate(0deg);

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-o-transform: rotate(0deg);

}

10% {

transform: rotate(36deg);

-moz-transform: rotate(36deg);

-webkit-transform: rotate(36deg);

-o-transform: rotate(36deg);

}

20% {

transform: rotate(72deg);

-moz-transform: rotate(72deg);

-webkit-transform: rotate(72deg);

-o-transform: rotate(72deg);

}

30% {

transform: rotate(108deg);

-moz-transform: rotate(108deg);

-webkit-transform: rotate(108deg);

-o-transform: rotate(108deg);

}

40% {

transform: rotate(144deg);

-moz-transform: rotate(144deg);

-webkit-transform: rotate(144deg);

-o-transform: rotate(144deg);

}

50% {

transform: rotate(180deg);

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-o-transform: rotate(180deg);

}

60% {

transform: rotate(216deg);

-moz-transform: rotate(216deg);

-webkit-transform: rotate(216deg);

-o-transform: rotate(216deg);

}

70% {

transform: rotate(252deg);

-moz-transform: rotate(252deg);

-webkit-transform: rotate(252deg);

-o-transform: rotate(252deg);

}

80% {

transform: rotate(288deg);

-moz-transform: rotate(288deg);

-webkit-transform: rotate(288deg);

-o-transform: rotate(288deg);

}

90% {

transform: rotate(324deg);

-moz-transform: rotate(324deg);

-webkit-transform: rotate(324deg);

-o-transform: rotate(324deg);

}

100% {

transform: rotate(360deg);

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

}

}

.rotary {

margin-top: 50px;

}

.rotary .col-xs-12 > .circle {

border-radius: 100%;

border: 15px solid #B2232A;

width: 240px;

height: 240px;

position: relative;

margin: 0 auto;

z-index: 1000;

overflow: hidden;

}

.rotary .col-xs-12 > .circle div {

position: absolute;

width: 90px;

height: 217.27922061px;

border-left: 45px transparent solid;

border-right: 45px transparent solid;

left: 50%;

margin-left: -45px;

}

.rotary .col-xs-12 > .circle .ct_go {

display: block;

position: absolute;

width: 50px;

height: 50px;

border-radius: 50%;

font-size: 20px;

font-weight: normal;

color: white;

text-align: center;

line-height: 40px;

border: 4px solid white;

top: 80px;

left: 50%;

margin-left: -25px;

background-color: #ff323c;

}

.rotary .col-xs-12 > .circle .ct_go:after {

content: "";

position: absolute;

width: 20px;

height: 20px;

border: 10px solid transparent;

border-bottom-color: white;

top: -21px;

left: 11px;

}

.rotary .fan1 {

border-top: 108.63961031px #fdd89d solid;

}

.rotary .fan2 {

border-top: 108.63961031px #fbb03b solid;

transform: rotate(45deg);

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform: rotate(45deg);

}

.rotary .fan3 {

border-top: 108.63961031px #fdd89d solid;

transform: rotate(90deg);

-moz-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

-o-transform: rotate(90deg);

}

.rotary .fan4 {

border-top: 108.63961031px #fbb03b solid;

transform: rotate(135deg);

-moz-transform: rotate(135deg);

-webkit-transform: rotate(135deg);

-o-transform: rotate(135deg);

}

.rotary .fan5 {

border-top: 108.63961031px #fdd89d solid;

transform: rotate(180deg);

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-o-transform: rotate(180deg);

}

.rotary .fan6 {

border-top: 108.63961031px #fbb03b solid;

transform: rotate(225deg);

-moz-transform: rotate(225deg);

-webkit-transform: rotate(225deg);

-o-transform: rotate(225deg);

}

.rotary .fan7 {

border-top: 108.63961031px #fdd89d solid;

transform: rotate(270deg);

-moz-transform: rotate(270deg);

-webkit-transform: rotate(270deg);

-o-transform: rotate(270deg);

}

.rotary .fan8 {

border-top: 108.63961031px #fbb03b solid;

transform: rotate(315deg);

-moz-transform: rotate(315deg);

-webkit-transform: rotate(315deg);

-o-transform: rotate(315deg);

}

原文：http://my.oschina.net/himiten/blog/486460