实现点亮星星评分的效果

场景:有些需求会要求用原生去实现点亮星星评分的效果,下面做了一个简单的demo,效果如下:

 

1.html部分

  <div class="box">
        <img src="./images/start-1.png" alt="">
        <img src="./images/start-1.png" alt="">
        <img src="./images/start-1.png" alt="">
        <img src="./images/start-1.png" alt="">
        <img src="./images/start-1.png" alt="">

        <div class="text"><span></span>分</div>
    </div>

2.css部分 

.box {
  width: 600px;
  height: 100px;
  border: 2px solid #9acd32;
  margin: 200px auto;
  display: flex;
  justify-content: center;
  position: relative;
}
.box img {
  width: 100px;
  height: 100px;
}
.box .text {
  font-size: 20px;
  font-weight: 600;
  color: #ccc;
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
}
.box .text span {
  color: #9acd32;
}

 3.js部分

 var num = 2;//默认点亮个数
    $item = $('.box').find('img');//获取的所有img
    //点亮星星函数
    var dianLiang = function (num) {
        $item.each(function (index) { //遍历所有img,即所有星星
            if (index < num) {
                $(this).attr('src', './images/start-2.png') //点亮
            } else {
                $(this).attr('src', './images/start-1.png') //未点亮
            }
        })
    }
    //初始化,默认点亮2颗
    dianLiang(num)
    // 绑定事件
    $item.on('mouseover', function () {
        let index=$(this).index() * 1 + 1
        dianLiang(index)
        $('.text span').text(index)
    }).on('click', function () {
        let index=$(this).index() * 1 + 1
        dianLiang(index);
        $('.text span').text(index)
        num = index
    })
    $('.box').on('mouseout', function () {
        dianLiang(num)
    })

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值