五星好评效果-CFANZ编程社区

五星好评效果
<!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>
0 条评论