11
Voglio fare il tipo di gioco "Spinning Wheel", in quanto l'utente può scegliere tre possibili risultati, e poi, dopo aver ruotato la ruota, se qualcuno dei i tre scelti sono venuti dopo lui/lei è un vincitore.Ruota della fortuna - La selezione finale non corrisponde al puntatore
Nella demo in basso è possibile vedere che, dopo aver interrotto lo spinner, il risultato non è il valore corretto. Dopo che lo spinner stesso si ferma, continua e cambia il valore - e prima dell'ultimo è sempre la lampadina. (Si prega di visualizzare questo FULLSCREEN per vedere a cosa mi riferisco.)
Come posso risolvere questo?
//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;
$(document).ready(function(){
\t
\t /*WHEEL SPIN FUNCTION*/
\t $('#spin').click(function(){
\t \t
\t \t //add 1 every click
\t \t clicks ++;
\t \t
\t \t /*multiply the degree by number of clicks
\t generate random number between 1 - 360,
then add to the new degree*/
\t \t var newDegree = degree*clicks;
\t \t var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
\t \t totalDegree = newDegree+extraDegree;
\t \t
\t \t /*let's make the spin btn to tilt every
\t \t time the edge of the section hits
\t \t the indicator*/
\t \t $('#wheel .sec').each(function(){
\t \t \t var t = $(this);
\t \t \t var noY = 0;
\t \t \t
\t \t \t var c = 0;
\t \t \t var n = 700; \t
\t \t \t var interval = setInterval(function() {
\t \t \t \t c++; \t \t \t \t
\t \t \t \t if (c === n) {
\t \t \t \t \t clearInterval(interval); \t \t \t \t
\t \t \t \t } \t
\t \t \t \t \t
\t \t \t \t var aoY = t.offset().top;
\t \t \t \t $("#txt").html(t.html());
\t \t \t \t console.log(aoY);
\t \t \t \t
\t \t \t \t /*23.7 is the minumum offset number that
\t \t \t \t each section can get, in a 30 angle degree.
\t \t \t \t So, if the offset reaches 23.7, then we know
\t \t \t \t that it has a 30 degree angle and therefore,
\t \t \t \t exactly aligned with the spin btn*/
\t \t \t \t if(aoY < 23.89){
\t \t \t \t \t console.log('<<<<<<<<');
\t \t \t \t \t $('#spin').addClass('spin');
\t \t \t \t \t setTimeout(function() {
\t \t \t \t \t \t $('#spin').removeClass('spin');
\t \t \t \t \t }, 100); \t
\t \t \t \t }
\t \t \t }, 10);
\t \t \t
\t \t \t $('#inner-wheel').css({
\t \t \t \t 'transform' : 'rotate(' + totalDegree + 'deg)' \t \t \t
\t \t \t });
\t \t
\t \t \t noY = t.offset().top;
\t \t \t
\t \t });
\t });
\t
\t
\t
});//DOCUMENT READY
\t*{ \t margin:0; \t padding:0; }
body{
\t background:#eaeaea;
\t color:#fff;
\t font-size:18px;
\t font-family: 'Exo 2', sans-serif;
}
a{
\t color:#34495e; \t
}
/*WRAPPER*/
#wrapper{
\t margin: 40px auto 0; \t
\t width:266px;
\t position:relative;
}
#txt{
\t color:#000; \t
}
/*WHEEL*/
#wheel{
\t width:250px;
\t height:250px;
\t border-radius:50%; \t
\t position:relative;
\t overflow:hidden;
\t border:8px solid #fff;
\t box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
\t transform: rotate(0deg);
}
#wheel:before{
\t content:'';
\t position:absolute;
\t border:4px solid rgba(0,0,0,0.1);
\t width:242px;
\t height:242px;
\t border-radius:50%;
\t z-index:1000; \t
}
#inner-wheel{
\t width:100%;
\t height:100%;
\t
\t -webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
\t -moz-transition: all 6 cubic-bezier(0,.99,.44,.99);
\t -o-transition: all 6s cubic-bezier(0,.99,.44,.99);
\t -ms-transition: all 6s cubic-bezier(0,.99,.44,.99);
\t transition: all 6s cubic-bezier(0,.99,.44,.99); \t
}
#wheel div.sec{
\t position: absolute;
\t width: 0;
\t height: 0;
\t border-style: solid;
\t border-width: 130px 75px 0;
\t border-color: #19c transparent;
\t transform-origin: 75px 129px;
\t left:50px;
\t top:-4px; \t
\t opacity:1;
}
#wheel div.sec:nth-child(1){
\t transform: rotate(60deg);
\t -webkit-transform: rotate(60deg);
\t -moz-transform: rotate(60deg);
\t -o-transform: rotate(60deg);
\t -ms-transform: rotate(60deg);
\t border-color: #16a085 transparent; \t
}
#wheel div.sec:nth-child(2){
\t transform: rotate(120deg);
\t -webkit-transform: rotate(120deg);
\t -moz-transform: rotate(120deg);
\t -o-transform: rotate(120deg);
\t -ms-transform: rotate(120deg);
\t border-color: #2980b9 transparent; \t
}
#wheel div.sec:nth-child(3){
\t transform: rotate(180deg);
\t -webkit-transform: rotate(180deg);
\t -moz-transform: rotate(180deg);
\t -o-transform: rotate(180deg);
\t -ms-transform: rotate(180deg);
\t border-color: #34495e transparent; \t
}
#wheel div.sec:nth-child(4){
\t transform: rotate(240deg);
\t -webkit-transform: rotate(240deg);
\t -moz-transform: rotate(240deg);
\t -o-transform: rotate(240deg);
\t -ms-transform: rotate(240deg);
\t border-color: #f39c12 transparent; \t
}
#wheel div.sec:nth-child(5){
\t transform: rotate(300deg);
\t -webkit-transform: rotate(300deg);
\t -moz-transform: rotate(300deg);
\t -o-transform: rotate(300deg);
\t -ms-transform: rotate(300deg);
\t border-color: #d35400 transparent; \t
}
#wheel div.sec:nth-child(6){
\t transform: rotate(360deg);
\t -webkit-transform: rotate(360deg);
\t -moz-transform: rotate(360deg);
\t -o-transform: rotate(360deg);
\t -ms-transform: rotate(360deg);
\t border-color: #c0392b transparent; \t
}
#wheel div.sec .fa{
\t margin-top: -100px;
\t color: rgba(0,0,0,0.2);
\t position: relative;
\t z-index: 10000000;
\t display: block;
\t text-align: center;
\t font-size:36px;
\t margin-left:-15px;
\t
\t text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}
#spin{
\t width:68px;
\t height:68px;
\t position:absolute;
\t top:50%;
\t left:50%;
\t margin:-34px 0 0 -34px;
\t border-radius:50%;
\t box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
\t z-index:1000;
\t background:#fff;
\t cursor:pointer;
\t font-family: 'Exo 2', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#spin:after{
\t content:"SPIN"; \t
\t text-align:center;
\t line-height:68px;
\t color:#CCC;
\t text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3) ;
\t position: relative;
\t z-index: 100000;
\t width:68px;
\t height:68px;
\t display:block;
}
#spin:before{
\t content:"";
\t position:absolute;
\t width: 0;
\t height: 0;
\t border-style: solid;
\t border-width: 0 20px 28px 20px;
\t border-color: transparent transparent #ffffff transparent;
\t top:-12px;
\t left:14px;
}
#inner-spin{
\t width:54px;
\t height:54px;
\t position:absolute;
\t top:50%;
\t left:50%;
\t margin:-27px 0 0 -27px;
\t border-radius:50%;
\t background:red;
\t z-index:999;
\t box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset, rgba(0,0,0,0.4) 0px 0px 5px ;
\t
\t background: rgb(255,255,255); /* Old browsers */
\t background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
\t background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
\t background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
\t background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
\t background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
\t background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1); /* IE6-9 fallback on horizontal gradient */ \t
}
#spin:active #inner-spin{
\t box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}
#spin:active:after{
\t font-size:15px; \t
}
#shine{
\t width:250px;
\t height:250px;
\t position:absolute;
\t top:0;
\t left:0;
\t background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */
opacity:0.1;
\t
}
/*ANIMATION*/
@-webkit-keyframes hh {
0%, 100%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
@keyframes hh {
0%, 100%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
.spin {
-webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
animation: hh 0.1s;
}<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Exo+2:900' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="wrapper">
<div id="wheel">
<div id="inner-wheel">
<div class="sec"><span class="fa fa-bell-o"></span></div>
<div class="sec"><span class="fa fa-comment-o"></span></div>
<div class="sec"><span class="fa fa-smile-o"></span></div>
<div class="sec"><span class="fa fa-heart-o"></span></div>
<div class="sec"><span class="fa fa-star-o"></span></div>
<div class="sec"><span class="fa fa-lightbulb-o"></span></div>
</div>
<div id="spin">
<div id="inner-spin"></div>
</div>
<div id="shine"></div>
</div>
<div id="txt"></div>
</div>Se c'è qualche altro demo simile come la mia funzionalità. allora l'aiuto può essere appropriato.
Grazie In anticipo.
quello che non capisci? –
Cosa stai chiedendo. Ad esempio, "Tuttavia, dopo che la casella di selezione Stop continua, modifica il valore e, in ultima analisi, la parola chiave" non ha senso. –
puoi eseguire il codice snippet su fullpage? quando si fermano. la freccia dosent mostra il pannello selezionato a destra. –