星级选择器，提交代码适用于评论等

没有用到js库，就是单独的js代码

复制代码 代码如下:

<form action="" method="get">

<div id="star_level" star_width="14">

<p>服务</p>

<ul>

<li>

<input type="text" name="serve" value="" />

</li>

<li>default level</li>

<li><a href="#" title="1 of 5 stars">1</a></li>

<li><a href="#" title="2 of 5 stars">2</a></li>

<li><a href="#" title="3 of 5 stars">3</a></li>

<li><a href="#" title="4 of 5 stars">4</a></li>

<li><a href="#" title="5 of 5 stars">5</a></li>

</ul>

<p>价格</p>

<ul>

<li>

<input type="text" name="price" value="" title="这里设置为2的话，表示默认2颗星亮。" />

</li>

<li>default level</li>

<li><a href="#" title="1 of 5 stars">1</a></li>

<li><a href="#" title="2 of 5 stars">2</a></li>

<li><a href="#" title="3 of 5 stars">3</a></li>

<li><a href="#" title="4 of 5 stars">4</a></li>

<li><a href="#" title="5 of 5 stars">5</a></li>

</ul>

<p>质量</p>

<ul>

<li>

<input type="text" name="mass" value="" />

</li>

<li>default level</li>

<li><a href="#" title="1 of 5 stars">1</a></li>

<li><a href="#" title="2 of 5 stars">2</a></li>

<li><a href="#" title="3 of 5 stars">3</a></li>

<li><a href="#" title="4 of 5 stars">4</a></li>

<li><a href="#" title="5 of 5 stars">5</a></li>

</ul>

</div>

<input type="submit" value="提交后请看地址栏的参数" />

</form>

复制代码 代码如下:

<script type="text/javascript">

<>

</script>

复制代码 代码如下:

body{font-size:12px;}

ul{padding:0;margin:0;}

/*star.css*/

.star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}

.star_rating li{padding:0;margin:0;float:left;}

.star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}

.star_rating li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;}

.star_rating a.one_star{left:0;}

.star_rating a.one_star:hover{width:14px;}

.star_rating a.two_stars{left:14px;}

.star_rating a.two_stars:hover{width:28px;}

.star_rating a.three_stars{left:28px;}

.star_rating a.three_stars:hover{width:42px;}

.star_rating a.four_stars{left:42px;}

.star_rating a.four_stars:hover{width:56px;}

.star_rating a.five_stars{left:56px;}

.star_rating a.five_stars:hover{width:70px;}

.star_rating li.current_rating{background:url(rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}

/*end star.css*/

#star_level{margin:0 0 20px 20px;}

#star_level p{margin:20px 0 5px 0;}

【js实现简单的星级选择器提交效果适用于评论等】相关文章：

★ COOL而实用的动态效果

★ 表单提交验证类

★ jQuery实现鼠标经过图片变亮其他变暗效果

★ 表单的一些基本用法与技巧

★ js+HTML5实现canvas多种颜色渐变效果的方法

★ js兼容火狐显示上传图片预览效果的方法

★ js实现点击链接后延迟3秒再跳转的方法

★ jQuery实现返回顶部效果的方法

★ JS+DIV实现鼠标划过切换层效果的方法

★ javascript实现Table间隔色以及选择高亮的方法