zoukankan      html  css  js  c++  java
  • jquery代码实现简单的五星评价功能!

    实现:  1,鼠标移动到第三个星星,则一二三星星变亮,后两个变暗

         2,鼠标点击某个星星后,可以继续选择,但拿开后星星会定格住你点击的位置

    <script type="text/javascript">
            //
            $(function () {
                //由于不好获取点击的span的是何坐标,所以声明一个变量来记录点击的span标签的id
                var mark;
                $("*").css({ margin: "0px", padding: "0px;" });
                $("span")
                    .css({ fontSize: "20px", color: "yellow" })
                    .mouseover(function () {
                        $(this).text("")
                            .prevAll().text("").end()
                            .nextAll().text("").end()
                            .click(function () {
                                mark = $(this).attr("id");
                            })
                    });
                $("div")
                     .css({  "100px", height: "20px", border: "1px solid black" })
                     .mouseout(function () {
                        //如果mark内有内容,则在鼠标离开div后,让星星数量变回你最近一次点击的位置
                         if (mark) {
                             $("#" + mark)
                                .text("")
                                .prevAll().text("").end()
                                .nextAll().text("");
                         }
                         //mark中没有值,意味着你没有点击任何星星,这时,让所有的星星都黯淡吧
                         else {
                             $("span").text("");
                         }
                     });
            });
        </script>
    </head>
    <body>
        <div id="div">
            <span id="1"></span><span id="2"></span><span id="3"></span><span id="4"></span><span id="5"></span>
        </div> 
    </body>
  • 相关阅读:
    sql知识
    铁道部新客票系统设计(三)
    PYTHON压平嵌套列表
    快速升级App支持iOS6及iPhone5的4寸屏幕
    TreeListView
    杭州ADC技术嘉年华两日总结SOA,去C
    .NET(C#): Task.Unwrap扩展方法和async Lambda
    关于分布式系统的数据一致性问题
    wcf 随笔1
    Linux进程基础
  • 原文地址:https://www.cnblogs.com/2333/p/4728037.html
Copyright © 2011-2022 走看看