Maison >interface Web >js tutoriel >jQuery implémente un code de vote d'histogramme sans actualisation avec des effets animés basés sur ajax_jquery

jQuery implémente un code de vote d'histogramme sans actualisation avec des effets animés basés sur ajax_jquery

WBOYoriginal: 2016-05-16 15:46:041012parcourir

L'exemple de cet article décrit l'implémentation par jQuery d'un code de vote de graphique à barres sans actualisation avec des effets animés basés sur ajax. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Les effets de vote jQuery ajax présentés ici sont des graphiques à barres avec des effets d'animation similaires au style de barre de progression. Prenez votre langage de programmation préféré comme exemple pour démontrer l'effet de vote Ajax sans actualiser, à chaque clic, l'histogramme horizontal s'agrandira. par une section. Si vous naviguez sous Firefox ou Chrome, les barres horizontales de l'histogramme ont des coins arrondis, mais cet effet n'existe pas sous IE8.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head>
<title>jQuery ajax投票特效,带动画效果 柱状图</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#container div a").click(function() {
  $(this).parent().animate({
   width: '+=100px'
  }, 500);
  $(this).prev().html(parseInt($(this).prev().html()) + 1);
  return false;
 });
});
</script>
<style type="text/css">
* {
 font-family: Arial, "Free Sans";
}
#container {
 margin-top: 20px;
 color: #fff;
}
#container #question {
 display: block;
 padding: 20px;
 font-weight: bold;
 letter-spacing: -3px;
 margin-bottom: 20px;
 padding: 10px;
 font-size: 40px;
}
#container div {
 font-weight: bold;
 letter-spacing: -3px;
 background: #0099cc;
 margin-bottom: 15px;
 padding: 10px;
 font-size: 34px;
 color: #ffffff;
 border-left: 20px solid #333;
 width: 400px;
 -webkit-border-radius: 0.5em;
 -moz-border-radius: 0 0.5em 0.5em 0;
 border-radius: 0 1.5em 1.5em 0;
}
#container div a {
 border-radius: 0.3em;
 text-decoration: none;
 color: #0099cc;
 padding: 5px 15px;
 background: #333;
 margin: 0 20px;
}
#container div a:hover {
 color: #fff;
}
#main {
 background: #0099cc;
 margin-top: 0;
 padding: 2px 0 4px 0;
 text-align: center;
}
#main a {
 color: #ffffff;
 text-decoration: none;
 font-size: 12px;
 font-weight: bold;
 font-family: Arial;
}
#main a:hover {
 text-decoration: underline;
}
body {
 margin: 0;
 padding: 0;
 background: #ffffff url('http://files.jb51.net/file_images/article/201508/2015810110844109.gif') repeat right top;
}
#text {
 margin: 0 auto;
 width: 500px;
 font-size: 12px;
 color: #0099cc;
 font-weight: bold;
 text-align: center;
 margin-top: 20px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
 <div id="container">
  <span id="question">你最喜欢的编程语言是哪一种？</span>
  <div><span>0</span><a href="">投票</a>PHP</div>
  <div><span>0</span><a href="">投票</a>Ruby</div>
  <div><span>0</span><a href="">投票</a>Java</div>
  <div><span>0</span><a href="">投票</a>ASP</div>
  <div><span>0</span><a href="">投票</a>Perl</div>
  <div><span>0</span><a href="">投票</a>ColdFusion</div>
 </div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

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

Article précédent：Introduction aux attributs internes et à l'opérateur de suppression dans les compétences js_javascriptArticle suivant：Introduction aux attributs internes et à l'opérateur de suppression dans les compétences js_javascript

Articles Liés

Voir plus