• jq评分🌟


    1.html部分

    <div class="form-group" id="starRating">
     <p class="photo">
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
        <span><i class="high col-sm-1"></i><i class="nohigh"></i></span>
     </p>
     <input value="0.0" name="f_score" style="border: none" placeholder="0分" class="starNum">
    </div>

    2.css部分

    <style>
        #starRating .photo span {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            overflow: hidden;
            margin-right: 4px;
            cursor: pointer;
        }
        #starRating .photo span:last-child {
            margin-right: 0px;
        }
        #starRating .photo span .nohigh {
            position: absolute;
            width: 21px;
            height: 21px;
            top: 0;
            left: 0;
            background: url("../static/image/star.png");
            background-size: cover;
        }
        #starRating .photo span .high {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 0;
            left: 0;
            background: url("../static/image/star1.png");
            background-size: cover;
        }
        #starRating .starNum {
            font-size: 20px;
            color: #de4414;
            margin-top: 4px;
            margin-bottom: 10px;
        }
        #starRating .photo {
            margin-top: 10px;
        }
        #starRating .bottoms a {
            margin-bottom: 0;
        }
        #starRating .bottoms .garyBtn {
            margin-right: 57px!important;
        }
        #starRating .bottoms a {
            width: 130px;
            height: 35px;
            line-height: 35px;
            border-radius: 3px;
            display: inline-block;
            font-size: 16px;
            transition: all 0.2s linear;
            margin: 16px 0 22px;
            text-align: center;
            cursor: pointer;
        }
    </style>

    3.js部分

    $(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').val((index*2).toFixed(1)/2+'分')
            });
            $('.photo').on('mouseleave',function () {
                $(this).find('.high').css('z-index',0);
                var count = starRating / 2;
                if(count == 5) {
                    $('.photo span').find('.high').css('z-index',1);
                } else {
                    $('.photo span').eq(count).prevAll().find('.high').css('z-index',1);
                }
                $('.starNum').val((starRating.toFixed(1))/2+'分')
            });
            $('.photo span').on('click',function () {
                var index = $(this).index()+1;
                $(this).prevAll().find('.high').css('z-index',1);
                $(this).find('.high').css('z-index',1);
                starRating = index*2;
                $('.starNum').val(starRating.toFixed(1)/2+'分');
            });

    图片:

           

    效果图:

  • 相关阅读:
    一、cocos2d-x 3.0 final使用httpclient编译到android,须要用到的android.mk
    lvchange的available參数
    基于谱减法的声音去噪
    ios使用openUrl进行应用跳转
    linux下ssh免密登陆
    字体图标 icon font
    hdu 3642 Get The Treasury(扫描线)
    3D游戏引擎一 win32编程
    Codeforces 112B-Petya and Square(实现)
    动态规划 is beginning。。。。。。。。。
  • 原文地址:https://www.cnblogs.com/zwtqf/p/9539523.html
Copyright © 2020-2023  润新知