代码-JS之小星星评论效果

效果：
在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!--编写CSS-->
    <style>
        img{
            float: left;
        }
    </style>

</head>
<body>

<!--编写HTML-->
<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="">

<!--编写JS-->
<script>
    //1.找到所有的图片
    var imgs = document.getElementsByTagName('img');
    for(var i=0; i<imgs.length;i++){
        //2.给对象加一个属性abc并赋值，当做img下标
        imgs[i].abc = i;
        //3.给每个图片绑定鼠标移入事件
        imgs[i].onmousemove = function(){
            //给n赋img下标
            var n = this.abc;
            //将n之前的所有图片都换为黄色
            for(var j=0; j<=n; j++){
                //设置图片src地址,将里面的3换为1,即可更换
                imgs[j].setAttribute('src', imgs[j].getAttribute('src').replace('3', '1'));
                imgs[j].setAttribute('src', imgs[j].getAttribute('src').replace('4', '2'));
            }
            //将n之后的图片都换为灰色
            for(var k=n+1; k<imgs.length; k++){
                imgs[k].setAttribute('src', imgs[k].getAttribute('src').replace('1', '3'));  // images/rank_3.gif
                imgs[k].setAttribute('src', imgs[k].getAttribute('src').replace('2', '4'));
            }
        };
    }
</script>

</body>
</html>

附件：联系1548582000@.com

posted @ 2018-10-19 08:21 羊驼可以吃吗阅读(273) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

羊驼可以吃吗

PHP,LINUX,C++

代码-JS之小星星评论效果

公告