电影等的评分效果图制作

    当我们看到一部喜欢的电影或是书,对里面的内容特别有共鸣,想要分享给更多人看。别人可以根据其的评分高低来自主选择是否查阅。其实这种评分效果的制作也不是很难,具体效果图如下:

电影等的评分效果图制作电影等的评分效果图制作电影等的评分效果图制作电影等的评分效果图制作电影等的评分效果图制作

鼠标移入第几颗星就显示出每一颗星星所代表的意思。点击一颗星的时候会触发一个鼠标点击事件,弹出一分,点击五颗星的时候弹出五分。如图:

电影等的评分效果图制作电影等的评分效果图制作

具体代码如下:

1、先写一个div,里面添加五个li标签,以便每一个li标签里面放置一张星星的图片。

电影等的评分效果图制作

2、分别给li和p设置样式及背景图片。

电影等的评分效果图制作

3、添加JS事件。aData是一个数组,通过this.index来控制数组的下标。鼠标移入哪一颗星分别显示出每一颗星所代表的意思。

电影等的评分效果图制作

注:aLi[i].className='active',鼠标移入时触发这句代码,给active事先设置好的样式是星星图片从上到下29px显示出黄色的星星。