Chinaunix首页 | 论坛 | 博客
  • 博客访问: 34624
  • 博文数量: 19
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 185
  • 用 户 组: 普通用户
  • 注册时间: 2015-06-08 17:27
文章分类

全部博文(19)

文章存档

2016年(5)

2015年(14)

我的朋友

分类: Html/Css

2015-12-29 13:48:08

star.zip
一、这个是评价时点亮星星,当你鼠标在第n颗星悬浮时,就会点亮前面的n颗星。效果如下图:

实现原理:
首先 ul 列表的背景就是五颗没点亮的星星, 每一个 li 都是绝对定位,宽度为第n颗星前面的宽度之和,当鼠标悬浮在第n颗星时,就用css更改对应的 li 的背景图片为点亮的星星

二、这是显示评价的星星,根据数据显示点亮星星的个数

实现原理:
首先 每一个li的背景就是五颗没点亮的星星,li里面放一个span定位在li的位置,span的背景就是五颗点亮的星星,js改变span的宽度来点亮星星
阅读(369) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~