Come, come, write for yourself--nine turntable

51 Emergency, April 29 received a small task, before the holiday to do a nine grid turntable small page, OH ~ ~ Design Draft has been out, the current time two o'clock in the afternoon,

Is changing the bug, the mainstream project 30th to go online, nine Gongge 30th noon to go online. Time is slightly tight 6 o'clock in the afternoon change the bug, overtime work nine Gongge.

One page, three screen content, nine Gongge, results pop-up window and sharing tips.

Plan:

• Writing static pages at night
• Write JS tomorrow morning.

At night the static interface is fixed, as follows:

HTML, CSS, width with 320px (mainly for mobile), the main content of absolute positioning, I think the current wording is still good,

There is no code, at the end I will attach a link to the page, if there is good advice, hope to get the guidance of the Great God.

JS, because do not want to go to the Internet to download other people's code, there is no time to study the other people's good way to achieve, I casually wrote a.

The general idea is as follows:

1. Implement Dumpers First: Put the execution order into the array, settimeout repeat the call, change the current active position (here the name a bit pit please ignore):

varTurnorder = [' bg-3 ', ' bg-6 ', ' bg-9 ', ' bg-8 ', ' bg-7 ', ' bg-4 ', ' bg-1 ', ' bg-2 '];varTurndom = []; for(vari = 0;i < turnorder.length; i++) {Turndom.push ($ (‘.‘ +turnorder[i]));}functionGoscroll (i) {if(i==8) i = 0; Turndom[i].addclass (' Active ');SetTimeout (function() {Turndom[i].removeclass (' Active '); I++;Goscroll (i); },500);}

2. Achieve acceleration, deceleration, and final results.

Acceleration and deceleration require settimeout delay control, acceleration or deceleration need to be judged by the delay range.

For the convenience of understanding, I will first directly mention the code:

$ (document). On (' click ', ' [data-action] ',function(e) {var$ This= $( This), Action= $ This. Data (' action '); Switch(action) { Case' Start ':            varSpeed = Math.floor (Math.random () *150) + 200;//Range of 350-200Goscroll (0, speed, 0.8);  Break; }});functionGoscroll (i, speed, mul) {if(Speed <) Mul = 1.1; if(i==8) i = 0; Turndom[i].addclass (' Active '); if(Speed > 350) {//EndTurndom[i].addclass (' Active '); Scrolling=false;        Openresult (i); return; } setTimeout (function() {Turndom[i].removeclass (' Active '); I++; speed= Speed *Mul;              Goscroll (i, speed, mul); },speed);}

Goscroll the incoming velocity and multiplier to the self-tuning function, the speed random range I set to 350-200 milliseconds, the initial multiplier is 0.8, and each time I multiply from the call to Tempo and Mul,

This speed is slowly becoming faster, when the speed is less than 30 milliseconds, the multiplier is 1.1, the speed slowly becomes slow, when the speed is greater than 350, stop and publish the results. Here's the result speed

Must be greater than the initial random speed, or the direct output will appear.

So far not perfect, and now each of the results of random probability is not average, began to turn, and did not stop the rotation button.

or directly paste the code:

varscrolling =false;//Are you turningvarWho ;functionsetwho () { who= Math.floor (Math.random () *9); if(who = = 8) who = 0;} $ (document). On (' Click ', ' [data-action] ',function(e) {var$ This= $( This), Action= $ This. Data (' action '); Switch(action) { Case' Start ':            if(scrolling==true)return;            Setwho (); varSpeed = Math.floor (Math.random () *150) + 200;//Range of 350-200scrolling =true; Goscroll (0, speed, 0.8);  Break; }});functionGoscroll (i, speed, mul) {if(Speed <) Mul = 1.1; if(i==8) i = 0; Turndom[i].addclass (' Active '); if(Speed > && who==i) {//EndTurndom[i].addclass (' Active '); Scrolling=false;        Openresult (i); return; } setTimeout (function() {Turndom[i].removeclass (' Active '); I++; speed= Speed *Mul;              Goscroll (i, speed, mul); },speed);}

Setwho is used to determine the result (here gives the probability of the company's software +1, that is, two-nineths probability, do not overdo O (∩_∩) o ... ), isscrolling, determine if it is turning.

Well, it's basically the most important logic. Of course, there are some parts are not posted out, if necessary, you can go to the actual project to see, then look at the effect it! "Point Here"

Come, come, write for yourself--nine turntable