1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style>
  7.             li{
  8.                 list-style: none;
  9.                 float: left;
  10.                 font-size: 36px;
  11.                 color: blue;
  12.                 cursor: pointer;
  13.             }
  14.         </style>
  15.         <script src="js/jquery-1.11.0.min.js"></script>
  16.         <script>
  17.             var stark = "☆";
  18.             var stars = "★"
  19.             $(function(){
  20.                 //未点击之前 li标签本身及前面全部添加样式
  21.                 $("li").on("mouseenter", function () {
  22.                  $(this).text(stars).prevAll().text(stars);
  23.                  $(this).nextAll().text(stark);
  24.              });
  25.  //鼠标离开事件，让所有的星星为空心；
  26.                  $("li").on("mouseleave", function () {
  27.                      $("li").text(stark);
  28.                      //让class 为current的 前面所有的星星为实体，后面的星星为空
  29.                      $("li.current").text(stars).prevAll().text(stars);
  30.                  })
  31. //注册点击事件，让当前点击的前面的星星全为实体；
  32.              $("li").on("click",function () {
  33.                  $(this).addClass("current").siblings().removeClass("current");
  34.              })
  35.             })
  36.         </script>
  37.     </head>
  38.     <body>
  39.         <div>
  40.             <ul>
  41.                <li>☆</li>
  42.              <li>☆</li>
  43.              <li>☆</li>
  44.              <li>☆</li>
  45.              <li>☆</li>
  46.             </ul>
  47.         </div>
  48.     </body>
  49. </html>

Jquery制作小星星(常用于评价)的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  3. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  4. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  5. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  6. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  7. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  8. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  9. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. 勾勾街:用最小的成本封装一个苹果IOS APP! 封装技术再度升级~

    勾勾街自上线以来,“遭到”大量群众的喜爱... 只能用遭到这个词儿,因为大家好像都被憋了很久了,哈哈哈! 我们的技术是先进的,也是首创的,但最近发现了另一个网站,把我们的技术抄走了.... 本来这个事 ...

  2. wamp apache 设置多端口

  3. BZOJ5326 : [Jsoi2017]博弈

    将所有物品按照$b$的选择顺序排序,则先手在任意前$i$个物品中最多只能拿走$\lceil\frac{i}{2}\rceil$个物品. 将每个物品的价值设为$a+b$,那么答案为先手拿走的价值和减去所 ...

  4. LPC 网络编程

    LPC有五种不同的通信模式(socket模式) ① MUD (面向连接的通信模式) 可以把除Object以外的所有LPC模型从一个MUD传到另一个MUD 弊端: 无法传送物件造成了穿越MUD的功能(即 ...

  5. P2649 - 【NOIP2017】列队

    Description Sylvia 是一个热爱学习的女孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有 n×m 名学生,方阵的行数为 ...

  6. 使用jq 仿 swper 图片左右滚动

    <div> <div /</div> <div class="box"> <div class="box-ul" ...

  7. 转发 Learning Go — from zero to hero

    原文:https://medium.freecodecamp.org/learning-go-from-zero-to-hero-d2a3223b3d86 Learning Go — from zer ...

  8. [LeetCode] Image Overlap 图像重叠

    Two images A and B are given, represented as binary, square matrices of the same size.  (A binary ma ...

  9. BurpSuite 代理设置的小技巧

    原文:https://www.anquanke.com/post/id/85925 作者:三思之旅 预估稿费:300RMB 投稿方式:发送邮件至linwei#360.cn,或登陆网页版在线投稿 在We ...

  10. JavaScript / 本地存储

    cookie 首先让我们先了解一下,什么是cookie,cookie是浏览器提供的一种机制,他将document.cookie的接口提供给JavaScript使其可以对cookie进行控制,但cook ...