jQuery滑动星星评分效果

最新推荐文章于 2022-09-27 16:32:53 发布

终身成长型

最新推荐文章于 2022-09-27 16:32:53 发布

阅读量1.2k

点赞数

分类专栏：前端开发文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45675581/article/details/102910846

版权

本文介绍了如何使用jQuery创建一个滑动星星的评分效果，包括鼠标滑过时的实时评分显示，以及允许用户取消和重新打分的功能。

摘要由CSDN通过智能技术生成

每日分享效果，今天分享一个jQuery滑动星星评分效果。

jQuery星星评分制作5颗星星鼠标滑过评分打分效果，可取消评分结果，重新打分。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/css.css">
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="starRating">
    <p class="photo">
        <span><i class="high"></i><i class="nohigh"></i></span>
        <span><i class="high"></i><i class="nohigh"></i></span>
        <span><i class="high"></i><i class="nohigh"></i></span>
        <span><i class="high"></i><i class="nohigh"></i></span>
        <span><i class="high"></i><i class="nohigh"></i></span>
    </p>
    <p class="starNum">0.0分</p>
    <div class="bottoms">
        <a class="garyBtn cancleStar">取消评分</a><a class="blueBtn sureStar">确认</a>
    </div>
</div>
<script>
    $(function () {
   
        //评分
        var starRating = 0;
        $('.photo span').on('mouseenter',function () {
   
            var index = $(this).index()+1;
            $(this).prevAll().find('.high').css('z-index',1)
            $(this).find('.high').css('z-index',1)
            $(this).nextAll().find('.high').css('z-index',0)
            $('.starNum').html((index*2

最低0.47元/天解锁文章

终身成长型

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
jQuery滑动星星评分效果

每日分享效果，今天分享一个jQuery滑动星星评分效果。jQuery星星评分制作5颗星星鼠标滑过评分打分效果，可取消评分结果，重新打分。HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t...
复制链接

扫一扫