Use jQuery to simulate Sohu debate vote animation code (with source code download) and jquery source code download
Based on jQuery, the code is used to simulate the voting animation code of Sohu's debate. It is a personalized cartoon villain's code for voting special effects. The animation effects are smooth and natural. Excellent user experience. The source code is compatible with the latest mainstream browsers.
Download demo source code
Html code:
<Script type = "text/javascript"> $ (document ). ready (function () {var a = 500; var B = 130; $ ("# white "). animate ({width: 0, left: "250px"}, 1000, function () {$ ("# "). fadeIn ("slow", function () {$ ("# all" ).html (a + B); $ ("# aa" ).html (); $ ("# bb" 2.16.html (B); var newLeft = a/(a + B) * 500-20 + "px "; // 20 is half of vs $ ("# "). animate ({left: newLeft}, 1000); $ ("# red "). animate ({width: newLeft}, 1000 );});});}); </script> <div id = "box_bg"> <div id = "container"> <div id = "green" class = "line"> </div> <div id = "red" class = "line"> </div> <div id = "white" class = "line"> </div> <div id = "vs"> </div> <div style = "width: pixel PX; margin: 0px auto; "> <div id =" aa2 "class =" scope "> <span id =" aa "> </span> </div> <div id =" bb2" class = "scope"> total <span id = "bb"> </span> tickets </div> <div id = "all2" class = "scope"> <span id = "all"> </span> ticket </div>
The above code is based on jQuery to implement an animation code similar to the Sohu debate vote. I hope it will help you!
Articles you may be interested in:
- Code Implementation Based on Jquery and WebMethod Voting
- JQuery-based voting system display result plug-in
- Jquery-based multi-color percentage dynamic progress bar voting effect display result implementation code
- PHP and jQuery realize special effects of red-blue Voting
- JQuery uses ajax to implement the Code to vote for a new bar chart without any animation effect
- Red-Blue (top-step) Voting code based on PHP + jQuery + MySql
- Simple Example of jquery color voting progress bar