Maison  >  Article  >  interface Web  >  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

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

WBOY
WBOYoriginal
2016-05-16 15:14:491456parcourir

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 !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn