html+css+js动态星级评价

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。<div id="xzw_starSys"> <div id="xzw_starBox"> <ul class="star" id="star"> <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li> <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li> <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li> <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li> <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li> </ul> <div class="current-rating" id="showb"></div> </div> <div class="description"></div></div>

4、书写css代码。* { font: normal 12px/2em '微软雅黑'; p锾攒揉敫adding: 0; margin: 0 }ul, li { list-style: none }a { color: #09f; }#xzw_starSys { width: 400px; border: 1px solid #ccc; padding: 50px; margin: 100px auto }#xzw_starBox { position: relative; width: 120px; float: left }#xzw_starSys .description { clear: both; padding: 10px 0px }#xzw_starSys .star { height: 20px; width: 120px; position: relative; background: url(../images/l.png) repeat-x; cursor: pointer }#xzw_starSys .star li { float: left; padding: 0px; margin: 0px }#xzw_starSys .star li a { display: block; width: 24px; height: 20px; overflow: hidden; text-indent: -9999px; position: absolute; z-index: 5 }#xzw_starSys .star li a:hover { background: url(../images/l.png) 0 -25px repeat-x; z-index: 3; left: 0 }#xzw_starSys .star a.one-star { left: 0 }#xzw_starSys .star a.one-star:hover { width: 24px }#xzw_starSys .star a.two-stars { left: 24px }#xzw_starSys .star a.two-stars:hover { width: 48px }#xzw_starSys .star a.three-stars { left: 48px }#xzw_starSys .star a.three-stars:hover { width: 72px }#xzw_starSys .star a.four-stars { left: 72px }#xzw_starSys .star a.four-stars:hover { width: 96px }#xzw_starSys .star a.five-stars { left: 96px }#xzw_starSys .star a.five-stars:hover { width: 120px }#xzw_starSys .current-rating { background: url(../images/l.png) 0 -25px repeat-x; position: absolute; height: 20px; z-index: 1; top: 0; left: 0 }

5、书写并添加js代码。<script src="js/jquery.js"></script><script>//star$(document).ready(function(){ var stepW = 24; var description = new Array("非常差，回去再练练","真的是差，都不忍心说你了","一般，还过得去吧","很好，是我想要的东西","太完美了，此物只得天上有，人间哪得几回闻!"); var stars = $("#star > li"); var descriptionTemp; $("#showb").css("width",0); stars.each(function(i){ $(stars[i]).click(function(e){ var n = i+1; $("#showb").css({"width":stepW*n}); descriptionTemp = description[i]; $(this).find('a').blur(); return stopDefault(e); return descriptionTemp; }); }); stars.each(function(i){ $(stars[i]).hover( function(){ $(".description").text(description[i]); }, function(){ if(descriptionTemp != null) $(".description").text("当前您的评价为："+descriptionTemp); else $(".description").text(" "); } ); });});function stopDefault(e){ if(e && e.preventDefault) e.preventDefault(); else window.event.returnValue = false; return false;};</script>

6、代码整体结构。

7、查看效果。