zoukankan      html  css  js  c++  java
  • Appcan 自定义星星评价

    注意要先有图片:     放在 css/icons/下

    HTML代码:

            <div class="ub ub-f1">
                <input id="bz-0" type="hidden" value="">
                <div class=" res-hui ub-img" id="bz-1" onclick="Fstar(this)"></div>
                <div class=" res-hui ub-img" id="bz-2" onclick="Fstar(this)"></div>
                <div class=" res-hui ub-img" id="bz-3" onclick="Fstar(this)"></div>
                <div class=" res-hui ub-img" id="bz-4" onclick="Fstar(this)"></div>
                <div class=" res-hui ub-img" id="bz-5" onclick="Fstar(this)"></div>
            </div>

    JS代码:

    //评星功能 
    function Fstar(obj){//点击星星发生的事件            
        var id = $(obj).attr("ID");
        var bz = id.split("-")[0];            
        var num= parseInt(id.split("-")[1]);
        $("#"+bz+"-0").val(num);for(var i=0;i<6;i++){
           if(i<=num){
               $("#"+bz+"-"+i).css("background-image","url('css/icons/starY.png')");//
           }else{        
               $("#"+bz+"-"+i).css("background-image","url('css/icons/starN.png')");
           }
        }
    }

    CSS代码:

    .res-hui{
        background-image:url('icons/starN.png');
        width:1.3em;
        height:1.3em;
    }
  • 相关阅读:
    价格与用户权限
    bootstrap-validator
    关于项目管理的感想
    rabbitmq使用日记
    matplotlib
    JS滑动到页面底部
    排序算法思想
    杀死指定进程
    pycharm的一些快捷键
    对支付宝支付的理解
  • 原文地址:https://www.cnblogs.com/wangliuwei/p/4630788.html
Copyright © 2011-2022 走看看