Implémentation d'un code d'animation de vote de débat de type Sohu basé sur jQuery (avec téléchargement du code source)_jquery

Basé sur jQuery, le code d'animation de vote de débat d'imitation Sohu est implémenté, un code d'effets spéciaux de vote de méchant de dessin animé personnalisé pour et contre le vote. Les effets d'animation de mouvement sont fluides et naturels. A une très bonne expérience utilisateur. Le code source est compatible avec les derniers navigateurs grand public.

Démonstration d'effet Téléchargement du code source

Code HTML :

<script type="text/javascript">
$(document).ready(function () {
var a = 500;
var b = 130;
$("#white").animate({ width: 0, left: "250px" }, 1000, function () {
$("#vs").fadeIn("slow", function () {
$("#all").html(a + b); $("#aa").html(a); $("#bb").html(b);
var newLeft = a / (a + b) * 500 - 20 + "px"; //20为vs 的一半
$("#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>
</div>
<div style="width:440px; margin:0px auto;">
<div id="aa2" class="scope">正方<span id="aa"></span>票</div>
<div id="bb2" class="scope">反共<span id="bb"></span>票</div>
<div id="all2" class="scope">总共<span id="all"></span>票</div>
</div>

Le code ci-dessus est basé sur jQuery pour implémenter un code d'animation de vote de débat de type Sohu. J'espère qu'il sera utile à tout le monde !