<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>评星</title> <script type="text/javascript" src="http://www.hyj.com/js/jquery.js"></script> <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> </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> <script type="text/javascript"> $(function(){ $(".xing ul li").mouseover(function(){ $(".xing_chen").css("width",$(this).text()*28+"px"); $(".xing_show span").text($(this).text()*20); }) $(".xing").mouseleave(function(){ if($(".xing_show").attr("rate")==""){ $(".xing_chen").css("width","0px"); } else{ $(".xing_chen").css("width",$(".xing_show").attr("rate")*28+"px"); $(".xing_show span").text($(".xing_show").attr("rate")*20); } }) $(".xing ul li").click(function(){ $(".xing_show").attr("rate",$(this).text()); $(".xing_show span").text($(".xing_show").attr("rate")*20); }) }) </script> </div> </body> </html>