Heim > Artikel > Web-Frontend > css3+jquery+html实现转盘效果_html/css_WEB-ITnose
css3+jquery+html实现转盘效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:421296Durchsuche
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>转盘</title> <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=1"/> <link rel="stylesheet" href="../css/bootstrap.min.css"/> <link rel="stylesheet" href="../css/rotary.css"/> <script src="../js/jquery-2.1.4.min.js"></script></head><body><div class="container-fluid"> <div class="row rotary"> <div class="col-xs-12"> <div class="circle"> <div class="fan1"></div> <div class="fan2"></div> <div class="fan3"></div> <div class="fan4"></div> <div class="fan5"></div> <div class="fan6"></div> <div class="fan7"></div> <div class="fan8"></div> <span class="ct_go">GO</span> </div> </div> </div></div></body><script> $(function(){ //该方法进行了递归调用 function circle(cut,sp,step,amount){ var i=0; //参数cut用于指定执行circle方法转动的圈数（除最后一次） var deg=cut*360; //参数sp表示第一次执行circle方法时的转动间隔时间 //参数step表示下一次执行circle方法时的转动间隔时间是在上一次的基础上加step //即转动间隔时间增量（从而实现越转越慢） //参数amount表示circle方法的递归调用次数 //变量slowest表示最后一次执行circle方法时的转动间隔时间 //主要用于停止递归调用时的判断 var slowest=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(cut,sp+step,step); } } },sp); } $(".ct_go").click(function(){ circle(3,3,3,7); }); });</script></html>
@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);} Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS 行内布局实践小结_html/css_WEB-ITnoseNächster Artikel：CSS极难问题求答_html/css_WEB-ITnose