1、准备好需要用到的图标。
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>
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>
7、查看效果。
