应用jQuery实现点评星星效果

使用jQuery实现点评星星效果

应用jQuery实现点评星星效果

没什么好说的，直接上代码吧

1. html代码

&lt;table  onmouseout="onUlMouseOut()" onmouseover="onUlMouseOver()"&gt;&lt;li&gt;&lt;a title="很差" data-hint="很差" href="javascript:clickStar(1);" onmouseover="onLiMouseOver(1)" onmouseout="onLiMouseOut()"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a title="差" data-hint="差" href="javascript:clickStar(2);" onmouseover="onLiMouseOver(2)" onmouseout="onLiMouseOut()"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a title="还行" data-hint="还行" href="javascript:clickStar(3);" onmouseover="onLiMouseOver(3)" onmouseout="onLiMouseOut()"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a title="好" data-hint="好" href="javascript:clickStar(4);" onmouseover="onLiMouseOver(4)" onmouseout="onLiMouseOut()"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a title="很好" data-hint="很好" href="javascript:clickStar(5);" onmouseover="onLiMouseOver(5)" onmouseout="onLiMouseOut()"&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;span id="ratingText" innerText=""&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;span innerText=""&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;textarea name="appraiseText" id="appraiseText" rows="12"&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td align="right"&gt;&lt;input type="button" value="提交" onclick="submitAppraise()"&gt;&lt;input type="button" value="关闭" onclick=" "&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

2. 所需要的css

body {color: #333;font: normal normal normal 12px/1.5 Arial, 宋体, sans-serif;}.block{clear: both;margin-bottom:20px;margin-bottom: 10px;zoom: 1;padding:5px 11px;border:1px solid #F5EEE8;padding-top:10px;margin:0 10px 0;padding-bottom:20px;border-bottom:1px dashed #E4E4E4;margin:10px auto;padding:0;border:none;}.label{float:right;margin-right: 10px;text-align: right;font-weight: normal;font-style:normal;width: 94px;}em{margin-right:5px;color:#c00;font-weight:bold;font-style:normal;margin-left:2px;}.note {color: #999;}.form-textarea{float: left;font-family: Tahoma, Geneva, sans-serif;margin-right: 5px;width: 598px;zoom: 1;font-family: inherit;font-size: 100%;-webkit-appearance: textarea;-webkit-box-orient: vertical;-webkit-rtl-ordering: logical;-webkit-user-select: text;background-color: white;border: 1px solid;cursor: auto;padding: 2px;resize: auto;white-space: pre-wrap;word-wrap: break-word;}.rating-wrap {display: inline-block;float: left;position: relative;top: -2px;width: 89px;height: 20px;margin-right: 5px;padding: 4px 0 0 5px;border: 1px solid #EFE0D7;background: #FFF9F1;z-index: 0;}.rating-wrap ul,.rating-wrap a:hover {background-image: url(../images/star_shade.png);background-repeat: no-repeat;}.rating-wrap ul {-webkit-padding-start: 40px;display: block;list-style-type: disc;margin: 1em 0px;border: 0px;margin: 0px;outline: 0px;padding: 0px;list-style: none;position: relative;width: 85px;height: 16px;background-position: 0 -90px;z-index: 10;}.rating-wrap li {display: inline;}.rating-wrap a {zoom: 1;position: absolute;left: 0;top: 0;display: block;height: 16px;}.rating-wrap .five-stars {width: 84px;z-index: 10;background-position: 0 0px;}.rating-wrap .four-stars {width: 68px;z-index: 20;background-position: 0 -18px;}.rating-wrap .three-stars {width: 51px;z-index: 30;background-position: 0 -36px;}.rating-wrap .two-stars {width: 34px;z-index: 40;background-position: 0 -54px;}.rating-wrap .one-star {width: 17px;z-index: 50;background-position: 0 -72px;}.active-hint{color: #C00;float: left;padding-top:2px;font-weight: normal;font-style:normal;}

3. 所需要的javascript代码

$(document).ready(function(){$("#appraiseText").bind("keydown", function(){var count = $("#appraiseText").val().length;if( count &lt;= 200 ){$("#textCount").html(" 还能输入&lt;font color='green'&gt;&lt;b&gt;" + (200 - count) + "&lt;/b&gt;&lt;/font&gt;个字");}else{$("#textCount").html(" 已超出&lt;font color='red'&gt;&lt;b&gt;" + (count - 200) + "&lt;/b&gt;&lt;/font&gt;个字");}});});var starValue=0;function onUlMouseOut(){var y = -90 + starValue * 18;var position = "0 " + y + "px";$(".rating-wrap-ul").css({"background-position" : position});}function onUlMouseOver(){$(".rating-wrap-ul").css({"background-position" : "0 -90px"});}function onLiMouseOver(grade){switch(grade){case 1 : document.getElementById("ratingText").innerHTML="很差";break;case 2 : document.getElementById("ratingText").innerHTML="差";break;case 3 : document.getElementById("ratingText").innerHTML="还行";break;case 4 : document.getElementById("ratingText").innerHTML="好";break;case 5 : document.getElementById("ratingText").innerHTML="很好";break;default :  document.getElementById("ratingText").innerHTML="";}}function onLiMouseOut(){onLiMouseOver(starValue);}function clickStar(grade){starValue = grade;var y = -90 + grade * 18;var position = "0 " + y + "px";$(".rating-wrap-ul").css({"background-position" : position});}

应用jQuery实现点评星星效果

热点推荐