jQuery評價(jià)打星的動畫是Web開發(fā)中常用的一個交互特效。它通過鼠標(biāo)懸停或點(diǎn)擊事件,根據(jù)打分?jǐn)?shù)值顯示對應(yīng)星級,從而幫助用戶更直觀地評價(jià)物品等。以下是一個簡單且易于理解的jQuery打星動畫代碼示例:
//HTML部分
<div class="rating">
<span class="star" data-star="1"></span>
<span class="star" data-star="2"></span>
<span class="star" data-star="3"></span>
<span class="star" data-star="4"></span>
<span class="star" data-star="5"></span>
</div>
//CSS部分
.rating {
display: inline-block;
font-size: 0;
}
.star {
display: inline-block;
margin-right: 5px;
width: 16px;
height: 16px;
background: url(star.png) no-repeat;
background-size: contain;
cursor: pointer;
}
.star.on, .star:hover {
background-position: 0 -16px;
}
//JS部分
$('.star').on('mouseover', function() {
$(this).prevAll().addBack().addClass('on');
$(this).nextAll().removeClass('on');
});
$('.rating').on('mouseout', function() {
$(this).find('.star').removeClass('on');
});
$('.star').on('click', function() {
var star = $(this).attr('data-star');
alert('您評價(jià)了'+star+'顆星');
});
以上代碼由HTML、CSS和jQuery三部分組成。HTML部分定義了打星用到的五個span元素,并通過data-star屬性分別標(biāo)記了星級數(shù)值。CSS部分則定義了星星的外觀樣式,并增加了鼠標(biāo)懸停和選中時(shí)的樣式變化。最關(guān)鍵的部分在于jQuery的實(shí)現(xiàn)。通過.mouseover()、.mouseout()和.click()等事件來控制星星的變化,從而實(shí)現(xiàn)了評價(jià)打星的交互特效。
總體來說,jQuery評價(jià)打星的動畫是一種簡單實(shí)用又易于掌握的Web交互特效。在網(wǎng)頁或Web應(yīng)用的設(shè)計(jì)中,它可以為用戶提供更舒適、便捷的使用體驗(yàn),從而提高用戶對網(wǎng)站或產(chǎn)品的評價(jià)意愿和忠誠度。