zoukankan      html  css  js  c++  java
  • JQ_五星级评分特效


    代码如下:
    <!DOCTYPE HTML>
    <html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery实现五星级评分-柯乐义</title>
    <style>
    *{margin:0;padding:0;font-size:13px;}
    ul,li{list-style:none;}
    .star {position:relative;600px;height:24px; margin:20px auto 0;}
    .star span {float:left;height:19px;line-height:19px;}
    .star ul{margin:0 10px;}
    .star li{float:left;24px;height:22px;text-indent:-9999px;background:url('http://keleyi.com/keleyi/phtml/jqtexiao/15/star.png') no-repeat;cursor:pointer;}
    .star li.on{background-position:0 -28px;}
    .star p {background:url('icon.gif') no-repeat;padding:10px 10px 0;position:absolute;top:20px;159px;height:60px;z-index:100;}
    .star p em {color: #FF6600;display: block;font-style: normal;}
    .star strong {color:#ff6600;padding-left:10px;}
    .hidden{display:none;}
    </style>
    <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/15/score.js"></script>
    </head>

    <body>
    <div style="736px;margin:0px auto;"><a href="http://keleyi.com/a/bjac/yg2au6tt.htm" target="_blank">原文</a></div>
    <div class="star">
    <span>jQuery星级评论打分</span>
    <ul>
    <li><a href="javascript:;">1</a></li>
    <li><a href="javascript:;">2</a></li>
    <li><a href="javascript:;">3</a></li>
    <li><a href="javascript:;">4</a></li>
    <li><a href="javascript:;">5</a></li>
    </ul>
    </div>
    <script type="text/javascript">
    $(function(){
    var score = new Score({
    callback: function(cfg) {
    console.log(cfg.starAmount);
    }
    });
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    判断qq浏览器和uc浏览器?
    做前端能避免的错误总结
    css布局
    border-radius后面写px/rem与百分比有什么区别?
    vertical-align
    localstorage和cookie的设置方法和获取方法
    怎么让列表的文字只显示两行,多出的出现省略号?
    avalon在公共页面里面写的功能,怎么让某些页面不引用到这个方法和html?
    小程序
    webpack
  • 原文地址:https://www.cnblogs.com/ingstyle/p/4668464.html
Copyright © 2011-2022 走看看