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>

  • 相关阅读:
    SWT的TableVierer的使用二(数据排序)
    SWT的TableVierer的使用一
    SWT的TreeVierer的使用
    SWT中一些细节的说明
    SWT中各种参数大全
    SWT的GridLayout一些参数解释
    SWT中的GridLayout(转)例子不错
    鼠标放到按钮上,实现的动画
    关于文字下方线消失的动画
    超出部分用省略号代替,鼠标放上去显示多余部分内容
  • 原文地址:https://www.cnblogs.com/ingstyle/p/4668464.html
Copyright © 2011-2022 走看看