今天自学jquery,原创实现了一个星级评定的效果,好happy啊!
下面是代码,欢迎拍砖!
<!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> <title>星级评定效果</title> <script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script> <style type="text/css"> ul { font-size: 26px; color: #808080; list-style-type: none; } li { display: inline; cursor: pointer; } </style> <script type="text/javascript"> $(function () { var s = false; var num = 0; $("li").click(function () { s = true; num = $("li").index(this); }); $("li").mouseover(function () { $(this).css("color", "yellow").prevAll().css("color", "yellow"); $(this).nextAll().css("color", "#808080"); }).mouseout(function () { if (s) { qs = num + 1; $("li:lt(" + qs + ")").css("color", "yellow"); $("li:gt(" + num + ")").css("color", "#808080"); } else { $("li").css("color", "#808080"); } }); }); </script> </head> <body> <ul> <li>★</li> <li>★</li> <li>★</li> <li>★</li> <li>★</li> <li>★</li> <li>★</li> <li>★</li> </ul> </body> </html>