五星好评效果

最新推荐文章于 2025-04-11 19:11:11 发布

HAI6545

最新推荐文章于 2025-04-11 19:11:11 发布

阅读量510

点赞数 1

分类专栏： JavaScript案例文章标签： javascript 前端 webview

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122625415

版权

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
</body>
<script>
// 1.在循环中绑定事件
// 获取所有图片标签
var imgs = document.querySelectorAll('img');
for(var i=0;i<imgs.length;i++){
    // imgs[i].onmouseover = function(){
    //     // 把当前星星前面的所有星星都变成黄色的 - 将3.gif换成1.gif，将4.gif换成2.gif
    //     // 先获取到当前星星的下标
    //     console.log(i);
    // }

    imgs[i].onmouseover = fn(i)
}

function fn(i){
    console.log(i);
    return function(){
        // console.log(i);
        for(var a=0;a<=i;a++){
            if(a%2){
                imgs[a].src = './images/rank_2.gif'
            }else{
                imgs[a].src = './images/rank_1.gif'
            }
        }
        for(var a=i+1;a<imgs.length;a++){
            if(a%2){
                imgs[a].src = './images/rank_4.gif'
            }else{
                imgs[a].src = './images/rank_3.gif'
            }
        }
    }
}



</script>
</html>