jQuery基于圖層模仿五星星評(píng)價(jià)功能的方法

字號(hào):


    這篇文章主要介紹了jQuery基于圖層模仿五星星評(píng)價(jià)功能的方法,使用jQuery動(dòng)態(tài)修改元素背景色的方法實(shí)現(xiàn)星評(píng)功能,需要的朋友可以參考下
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "">
    <html xmlns="">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>無(wú)標(biāo)題文檔</title>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script>
    $(function(){
    $(".star li").mouseenter(function(){
    $(".star li").css("background","#f60");
    $(this).css("background","#f60");
    $(this).nextAll().css("background","#ccc");
    })
    });
    </script>
    <style type="text/css">
    * {<br />
    padding:0;margin:0;
    list-style:none; float:left;
    }
    .star li {
    float: left;
    height: 20px;
    width: 20px;
    background-color: #CCC;
    margin-right: 4px;
    }
    </style>
    </head>
    <body>
    <div>選幾星:</div>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </body>
    </html>
    希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。