javascript实现星星评分特效

最新推荐文章于 2024-05-03 10:06:59 发布

Best_xing

最新推荐文章于 2024-05-03 10:06:59 发布

阅读量2.3k

点赞数 2

文章标签： javascript 星星特效

本文链接：https://blog.csdn.net/Best_xing/article/details/79773225

版权

源码+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

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
javascript实现星星评分特效

源码+images：即鼠标放在星星上面，星星自动亮且提交评分。具体实现：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel=&qu
复制链接

扫一扫