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>
  • 相关阅读:
    css定位
    Register Form
    自我介绍
    靠,用 mod_proxy_ajp 代替 mod_jk 不知简单多少倍
    Mac 切换 32 和 64
    JAVA面向对象(8)
    JAVA面向对象(7)
    JAVA面向对象(6)
    JAVA面向对象(5)
    JAVA面向对象(4)
  • 原文地址:https://www.cnblogs.com/2333/p/4728037.html
Copyright © 2011-2022 走看看