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

最新推荐文章于 2023-07-16 22:16:53 发布

weixin_30753873

最新推荐文章于 2023-07-16 22:16:53 发布

阅读量129

点赞数

原文链接：http://www.cnblogs.com/phpisfirst/p/9819132.html

版权

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

<!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

转载于:https://www.cnblogs.com/phpisfirst/p/9819132.html

weixin_30753873

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
代码-JS之小星星评论效果

效果：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalabl...
复制链接

扫一扫