<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>jquery评星</title> <style type="text/css"> .dengji { position: relative; padding: 0; margin: 0; } .xing { overflow: hidden; padding: 0; margin: 0; width: 140px; display: inline-block; background: url("http://www.hyj.com/theme/hieiika/images/two_stars.gif") repeat-x 0 -32px; float: left; } .xing ul { list-style: none; padding: 0; margin: 0; } .xing ul li { height: 32px; width: 28px; float: left; line-height: 32px; overflow: hidden; cursor: pointer; z-index: 1000; display: inline-block; position: relative; text-indent: -9999px; } .xing_chen { background: url("http://www.hyj.com/theme/hieiika/images/two_stars.gif") repeat-x 0 0; height: 32px; position: absolute; top: 0; left: 0; width: 0; cursor: pointer; } .xing_show { float: left; line-height: 32px; padding-left: 20px; } .xing_show span { color: #f50; font-size: 14px; font-weight: 700; padding: 0 10px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(function () { var $li = $(".xing ul li"); var $xing = $(".xing_chen"); var $xingNum = $(".xing_show"); //鼠标滑过事件 $li.mouseover(function () { //设置xing_chen背景样式 $xing.css("width", $(this).attr("rate") * 28 + "px"); //设置当前评分数字 $xingNum.children("span").text($(this).attr("rate") * 20); }); //鼠标离开事件 $li.mouseleave(function () { //如果xing_show的属性rate为空时 if ($xingNum.attr("rate") == "") { //xing_chen的width样式为0 $xing.css("width", "0"); } else { //否则设置xing_chen的样式width $xing.css("width", $xingNum.attr("rate") * 28 + "px"); //设置xing_show的分数值 $xingNum.children("span").text($xingNum.attr("rate") * 20); } }); //点击事件 $li.click(function () { //设置xing_show的rate属性 及评分数值 $xingNum.attr("rate", $(this).text()); $xingNum.children("span").text($xingNum.attr("rate") * 20); }); }); </script> </head> <body> <div class="dengji"> <div class="xing"> <ul> <li rate="1">1</li> <li rate="2">2</li> <li rate="3">3</li> <li rate="4">4</li> <li rate="5">5</li> </ul> <div class="xing_chen"></div> </div> <div class="xing_show" rate="1">当前评分为<span>0</span>分</div> </div> </body> </html>
转载于:https://www.cnblogs.com/dsfderek/archive/2012/05/04/2482799.html