Dans le domaine de l'affichage des notes, transformer des valeurs numériques en notes par étoiles est un défi commun. Comment pouvons-nous générer dynamiquement des notes par étoiles basées sur une saisie numérique à l'aide de jQuery et CSS ?
Voici une solution innovante qui exploite une seule image et CSS :
<br>span.stars, span.stars span {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: block; background: url(stars.png) 0 -16px repeat-x; width: 80px; height: 16px;
}
span.stars span {
background-position: 0 0;
}
<br>$.fn.stars = function() {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return $(this).each(function() { var val = parseFloat($(this).html()); var size = Math.max(0, (Math.min(5, val))) * 16; var $span = $('<span />').width(size); $(this).html($span); });
}
<br><span> <envergure class="étoiles">2.6545344</span><br><span><span class="stars">8</span><br>
<br>$(fonction () {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$('span.stars').stars();
});
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!