实现：　　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({ width: "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>

jquery代码实现简单的五星评价功能！的更多相关文章

  1. javascript代码实现简单的五星评价功能！

    <script type="text/javascript"> //★ var spans=document.getElementsByTagName("sp ...

  2. 三行Jquery代码实现简单的选项卡

    今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...

  3. jQuery代码性能小细节

    选择器Selector的使用 $("#id")使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId( ...

  4. jquery轮播图详解，40行代码即可简单解决。

    我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jq ...

  5. 经验分享：10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  6. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

  7. jQuery实现的简单分页功能的详细解析

    分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...

  8. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  9. jQuery实现简单的五星好评

    最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...

随机推荐

  1. POJ 1284 Primitive Roots 原根

    题目来源:POJ 1284 Primitive Roots 题意:求奇素数的原根数 思路:一个数n是奇素数才有原根 原根数是n-1的欧拉函数 #include <cstdio> const ...

  2. 快速构建Windows 8风格应用15-ShareContract构建

    原文:快速构建Windows 8风格应用15-ShareContract构建 本篇博文主要介绍共享数据包.如何构建共享源.如何构建共享目标.DataTransferManager类. 共享数据包 Da ...

  3. jQuery圆形统计图实战开发

    今天我给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便. 首先我们需要将jquery库文件和jqu ...

  4. Pythonic论坛怪怪的’居民’显示[已解决]

    之前使用Pythonic搭建的论坛people界面显示有点问题 第一个用户不显示,问了下作者,作者回复说这个Link只有~/people/而没有用户名 就点到为止了. 按说我使用syncdb同步时注册 ...

  5. 编程乐趣：C#获取日期所在周、月份第一和最后一天

    原文:编程乐趣:C#获取日期所在周.月份第一和最后一天 写了个小功能,需要用到以周为时间段,于是写了个获取周第一和最后一天的方法,获取月份的第一和最后一天就比较简单了.代码如下: public cla ...

  6. Gimp教程:多图层多渐变的文字效果

    这个教程是我在国外的视频网站上学的,制作这个教程也很久了,今天在网盘翻看到这个截图版本,正好整理到博客,方便管理.记得当时花了一下午的时间来边做边截图修改制作,个人觉得这个教程还是很好的,原作者很有创 ...

  7. SAE设置记录：修改config.yaml实现地址重写和修改固定链接

    刚搭建完sae博客后闲置下来了,偶尔写两篇文章,最近想整理整理sae,于是开始. 刚新建完博客修改固定链接,可是保存后直接访问出现问题,访问不到文章了,而且我的博客地址前面会出现"1.&qu ...

  8. .NET的微型Web框架 Nancy

    .NET的微型Web框架 Nancy .NET的微型Web框架 Nancy   大部分微软平台的开发人员如果选择开发框架只能是在ASP.NET WEBFORM和ASP.NET MVC两个之间选择. 而 ...

  9. PHP：Cannot modify header information - headers already sent by错误的解决方案

    <?php ob_start();setcookie("username","test",time()+3600);echo "the user ...

  10. ADFS 2.0 配置简介 PartⅡ – 配置 ADFS 信任关系

    ADFS 与应用程序间的各种验证是基于信任关系的,在 ADFS 服务器配置好要信赖的应用程序(以 URL 为标识)后,应用程序再通过指定认证服务器来将用户引导至 ADFS 登录页,登录完成后再将用户的 ...