這篇文章主要介紹了jquery實現簡單實用的打分程序,涉及jquery節點遍歷與樣式操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery實現簡單實用的打分程序。分享給大家供大家參考。具體如下：
- <!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>Untitled Document</title>
- <script src="js/jquery-1.7.1.min.js"></script>
- <script src="js/jquery.raty.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#div1").hover(function(){
- $("#div1 li").hover(function(){
- h=0;
- n=$("#div1 li").index(this);
- for(var i=0;i<=n;i++){
- $("#div1 li").eq(i).addClass("on");
- }
- $("#div1 li").click(function(){
- h=1;
- m=$("#div1 li").index(this);
- for(var i=0;i<=m;i++){
- $("#div1 li").eq(i).addClass("on");
- }
- return;
- })
- },function(){
- if(h==0)
- for(var i=5;i>=n;i--){
- $("#div1 li").eq(i).removeClass("on");
- }
- }
- )
- },function(){
- if(h==0)
- for(var i=0;i<=5;i++){
- $("#div1 li").eq(i).removeClass("on");
- }
- })
- })
- </script>
- <style type="text/css">
- #div1 ul li{
- margin:0 -8px;
- width:30px;
- height:34px;
- list-style:none;
- float:left;
- width:35px;
- background:url(img/xing1.gif) center center no-repeat;
- margin-left:10px;
- }
- #div1 ul li.on{
- background:url(img/xing2.gif) center center no-repeat;
- }
- #div1{
- height:35px;
- }
- </style>
- </head>
- <body>
- <div id="div1">
- <ul>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- </div>
- </body>
- </html>
希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
