五角星评分效果实现，轻松打造互动体验
<h1>五角星评分效果实现，轻松打造互动体验</h1>
<p>采用Jq Css制作的五角星评分效果，主要是利用CSS的background-image以及background-position来调整我们的背景图片，以及Jq来选择要变化的元素。代码非常简单，只有几行。</p>
<p><strong>效果：</strong><br><center><img decoding="async" src="https://www.teamczyx.com/newpic/1d0e4a484f3666cd/20150803134146.png" alt="五角星评分效果实现，轻松打造互动体验" width="299" height="54"></center><br></p>
<p><strong>html代码：</strong></p>
<div class="formItemDiff formItemDiffFirst">;</div>;
<div class="formItemDiff">;</div>;
<div class="formItemDiff">;</div>;
<div class="formItemDiff">;</div>;
<div class="formItemDiff">;</div>;
<div class="formItemDiff">;</div>;
<div class="formItemDiff">;</div>;
<div class="formItemDiff">;</div>;
<div class="formItemDiff">;</div>;
<div class="formItemDiff">;</div>;
<p id="pointP" style="float:left; margin-left:20px;">;</p>;
<p><strong>css代码：</strong></p>
#typeone {
width:
}
.formItemDiff {
width: 20px;
height: 20px;
background-image: url(diff.png);
background-position: 0px -575px;
float: left;
margin-top: 15px;
}
<p><strong>jq代码：</strong></p>
$(document).ready(function(e) {
$(".formItemDiff").hover(function() {
$(this).css("background-position", "0px -555px");
$(this).prevAll().css("background-position", "0px -555px");
$(this).nextAll().css("background-position", "0px -575px");
$("#pointP").html($(this).prevAll().length+1+"分");
});
});
<p><strong>查看示例：</strong>wuxing</p>
<p>跟多阅读：</p>
<p>css3绘制三角形和div阴影用法实例</p>
<p>html JavaScript倒计时跳转页 …</p>
页:
[1]