设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web特效宝典 › 177-星级评分
返回列表 发新帖
查看: 1145|回复: 1

177-星级评分

[复制链接]
不二如是
发表于 2019-1-22 15:02:30 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
Snip20190122_49.png


玩法说明：

★不写代码，拿来直接用

★提供源码下载（悉听尊便）

★Write Once，Sex EveryWhere



代码包下载(回复“我爱鱼C”，即可看到源码包)：
游客，如果您要查看本帖隐藏内容请回复




特效展示：
Jan-22-2019 15-01-04.gif




如果喜欢，别忘了评分 ：


                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

像番茄加两个蛋
发表于 2019-2-4 08:51:43 | 显示全部楼层
这好今天早上一起来就写了一个超简单的评分，我用JQuery写的。现在看看真正的星级评分是怎么实现的。

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>五角星评分案例</title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }

  13.         .comment {
  14.             font-size: 40px;
  15.             color: rgb(206, 206, 0);
  16.         }

  18.         .comment li {
  19.             float: left;
  20.             cursor: pointer;
  21.         }

  23.         ul {
  24.             list-style: none;
  25.         }
  26.     </style>
  27.     <script src="jquery-1.12.2.js"></script>
  28.     <script>
  29.         $(function () {
  30.             $('.comment>li').mouseover(function () {
  31.                 $(this).text('★').prevAll('li').text('★').end().nextAll('li').text('☆');
  32.             }).mouseout(function () {
  33.                 $('.comment').find('li').text('☆');
  34.                 $('.comment>li[index=1]').text('★').prevAll('li').text('★');
  35.             }).click(function () {
  36.                 // 自定义属性
  37.                 $(this).attr('index','1').siblings('li').removeAttr('index');
  38.                 //
  39.             });
  40.         });
  41.     </script>
  42. </head>

  44. <body>
  45. <ul class="comment">
  46.     <li>☆</li>
  47.     <li>☆</li>
  48.     <li>☆</li>
  49.     <li>☆</li>
  50.     <li>☆</li>
  51. </ul>
  52. </body>

  54. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-5 07:19

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表