javascript实现星星评分特效



源码+images：

即鼠标放在星星上面，星星自动亮且提交评分。

具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="pingfen.css" type="text/css">
    <script type="text/javascript" src="pingfen.js"></script>
</head>
<body>
<div id="pingfen">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

用css对图片位置进行一些修饰。

*{
    margin: 0;
    padding: 0;
}
#pingfen{
    width: 135px;
    margin: 40px auto;
    height: 28px;
}
#pingfen li{
    width: 27px;
    float: left;
    height: 28px;
    cursor: pointer;
    background: url("star.gif") no-repeat 0 0;
    list-style: none;
}

用js做图片特效。

window.onload = function () {
    var oPf = document.getElementById('pingfen');
    var aLi = oPf.getElementsByTagName('li');
    var i = 0;
    for (i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].onmouseover = function () {
            for (i = 0; i < aLi.length; i++) {
                if (i <= this.index) {
                    aLi[i].style.background = "url(star.gif) no-repeat 0 -29px";
                }
                else {
                    aLi[i].style.background = "url(star.gif) no-repeat 0 0";
                }
            }
        };

        aLi[i].onmousedown = function () {
            alert('提交成功:' + (this.index + 1) + '分');
        };
    }
};
版权声明：本文为Best_xing原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。