《
CSS制作星级评价的功能》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333022013.htm
CSS：
效果很简单，可能现在您当初头脑里已经有实现的思路了。下面先看一下咱们通常情形下的实现方式：
Code highlighting produced by Actipro CodeHighlighter (freeware) --><p>Javascript + CSS实现</p>
<ul ,
CSS初学者必知CSS技巧;class="jsstar">
<li title="一星"></li>
<li title="二星"></li>
<li title="三星"></li>
<li title="四星"></li>
<li title="五星"></li>
</ul>
--> [
网站建设之]CSS制造星级评估的功效
是不是跟上面的没什么差别，可是又一想如果用户禁掉了javascript岂不是效果很惨？
看看上面CSS的行号你是不是吓了一跳，这么简单的效果居然用了这么多代码？在我看来不必JS就只能一个效果一个款式了，假如您还有更简略更炫的后果请指教！
CSS：
这里是效果图：
做一个星级评价的功能不是很难，然而要单纯用CSS写估量就有点难度了，先来个截图：
代码 Code highlighting produced by Actipro CodeHighlighter (freeware)> 1 /*CSS Star start*/
2 .star-rating
3 {
4 list-style: none;
5 margin: 0px;
6 padding: 0px;
7 ,
CSS创建圆角框; width: 100px;
8 height: 20px;
9 position: relative;
10 background: url(star_rating.gif) top left repeat-x;
11 }
12 .star-rating li
13 ,
CSS分内部和外部两种方式; {
14 padding: 0px;
15 margin: 0px;
16 float: left;
17 }
18 .star-rating li a
19 {
20 display: block;
21 width: 20px;
22 height: 20px;
23 text-decoration: none;
24 text-indent: -9000px;
25 z-index: 20;
26 position: absolute;
27 padding: 0px;
28 }
29 .star-rating li a:hover
30 {
31 background: url(star_rating.gif) left bottom;
32 z-index: 1;
33 left: 0px;
34 }
35 .star-rating a.one-star
36 {
37 left: 0px;
38 }
39 .star-rating a.one-star:hover
40 {
41 width: 20px;
42 }
43 .star-rating a.two-stars
44 {
45 left: 20px;
46 }
47 .star-rating a.two-stars:hover
48 {
49 width: 40px;
50 }
51 .star-rating a.three-stars:hover
52 {
53 width: 60px;
54 }
55 .star-rating a.three-stars
56 {
57 left: 40px;
58 }
59 .star-rating a.four-stars
60 {
61 left: 60px;
62 }
63 .star-rating a.four-stars:hover
64 {
65 width: 80px;
66 }
67 .star-rating a.five-stars
68 {
69 left: 80px;
70 }
71 ,
css兼容调试常见情况及相应方法; .star-rating a.five-stars:hover
72 ,
CSS兼容要点总结; {
73 width: 100px;
74
75 }
于是我们想到了用纯CSS实现，下面是代码：
Tag：星级评价 星级评价
Code highlighting produced by Actipro CodeHighlighter (freeware)><ul class='star-rating'>
<li><a href='#' title='一星' class='one-star'>1</a></li>
<li><a href='#' title='二星' class='two-stars'>2</a></li>
<li><a href='#' title='三星' class='three-stars'>3</a></li>
<li><a href='#' title='四星' class='four-stars'>4</a></li>
<li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
示例代码下载
JS：（我用的是jquery）
Code highlighting produced by Actipro CodeHighlighter (freeware) --><script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
,
CSS兼容性（IE和Firefox）技巧大全; $(".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>
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) --> .jsstar
{ list-style: none;
,
CSS兼容 用CSS代码来判断浏览器是Firefox、IE6、IE7的代码; margin: 0px;
padding: 0px;
width: 100px;
height: 20px;
position: relative;
,
CSS入门教程：长度与单位;
}
.jsstar li
,
CSS入门教程：详解border color;{
padding:0px;
margin: 0px;
float: left;
,
CSS入门教程：整数类型与实数类型;width:20px;
height:20px;
background:url(star_rating.gif) 0 0 no-repeat;
}
HTML：
HTML：
(责任编辑：网站建设)
CSS制作星级评价的功能相关文章