CSS 星級(jí)評(píng)價(jià)效果代碼

2024-07-11 08:26:51

字體：大中小

供稿：網(wǎng)友

先來(lái)個(gè)截圖：

效果很簡(jiǎn)單，可能現(xiàn)在您現(xiàn)在腦子里已經(jīng)有實(shí)現(xiàn)的思路了。下面先看一下我們通常情況下的實(shí)現(xiàn)方法：
CSS：
代碼

復(fù)制代碼

代碼如下:
.jsstar
{ list-style: none;
margin: 0px;
padding: 0px;
width: 100px;
height: 20px;
position: relative;
}
.jsstar li
{
padding:0px;
margin: 0px;
float: left;
width:20px;
height:20px;
background:url(star_rating.gif) 0 0 no-repeat;
}

HTML：

復(fù)制代碼

代碼如下:
<p>Javascript + CSS實(shí)現(xiàn)</p>
<ul class="jsstar">
<li title="一星"></li>
<li title="二星"></li>
<li title="三星"></li>
<li title="四星"></li>
<li title="五星"></li>
</ul>

JS：（我用的是jquery）

復(fù)制代碼

代碼如下:
<script type="text/javascript" src="http://www.survivalescaperooms.com/uploads/allimg/190316/1449442X1-1.jpg"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".jsstar >li").hover(
function(){$(this).css({"background-position":"left bottom"}).prev().trigger("mouseover")},
function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("title"))});
});
</script>

這里是效果圖：

是不是和上面的沒(méi)什么區(qū)別，可是又一想如果用戶禁掉了javascript豈不是效果很慘？
于是我們想到了用純CSS實(shí)現(xiàn)，下面是代碼：
CSS：
代碼

復(fù)制代碼

代碼如下:
/*CSS Star start*/
.star-rating
{
list-style: none;
margin: 0px;
padding: 0px;
width: 100px;
height: 20px;
position: relative;
background: url(star_rating.gif) top left repeat-x;
}
.star-rating li
{
padding: 0px;
margin: 0px;
float: left;
}
.star-rating li a
{
display: block;
width: 20px;
height: 20px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover
{
background: url(star_rating.gif) left bottom;
z-index: 1;
left: 0px;
}
.star-rating a.one-star
{
left: 0px;
}
.star-rating a.one-star:hover
{
width: 20px;
}
.star-rating a.two-stars
{
left: 20px;
}
.star-rating a.two-stars:hover
{
width: 40px;
}
.star-rating a.three-stars:hover
{
width: 60px;
}
.star-rating a.three-stars
{
left: 40px;
}
.star-rating a.four-stars
{
left: 60px;
}
.star-rating a.four-stars:hover
{
width: 80px;
}
.star-rating a.five-stars
{
left: 80px;
}
.star-rating a.five-stars:hover
{
width: 100px;
}

上一篇：ie6 fixed bug的解決方法 (css+js)

下一篇：學(xué)習(xí)web標(biāo)準(zhǔn)的十個(gè)重要理由總結(jié)

發(fā)表評(píng)論

共有條評(píng)論