jquery实现简单实用的打分程序实例
本文实例讲述了jquery实现简单实用的打分程序。分享给大家供大家参考。具体如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>UntitledDocument</title> <scriptsrc="js/jquery-1.7.1.min.js"></script> <scriptsrc="js/jquery.raty.min.js"></script> <scripttype="text/javascript"> $(function(){ $("#div1").hover(function(){ $("#div1li").hover(function(){ h=0; n=$("#div1li").index(this); for(vari=0;i<=n;i++){ $("#div1li").eq(i).addClass("on"); } $("#div1li").click(function(){ h=1; m=$("#div1li").index(this); for(vari=0;i<=m;i++){ $("#div1li").eq(i).addClass("on"); } return; }) },function(){ if(h==0) for(vari=5;i>=n;i--){ $("#div1li").eq(i).removeClass("on"); } } ) },function(){ if(h==0) for(vari=0;i<=5;i++){ $("#div1li").eq(i).removeClass("on"); } }) }) </script> <styletype="text/css"> #div1ulli{ margin:0-8px; width:30px; height:34px; list-style:none; float:left; width:35px; background:url(img/xing1.gif)centercenterno-repeat; margin-left:10px; } #div1ulli.on{ background:url(img/xing2.gif)centercenterno-repeat; } #div1{ height:35px; } </style> </head> <body> <divid="div1"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。