js评星效果怎么写？

JavaScript013

js评星效果怎么写？,第1张

功能特点：1.同一页面可以使用多个评星，相互不干扰2.星星数量可自定义3.可设置默认的星级4.在选择星级之后，仍有悬停效果请参考鄙人的博客： http://blog.csdn.net/civerb/archive/2009/10/22/4712444.aspx

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.active{color: #f00}

</style>

</head>

<body>

<div class="container"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>

<script src="js/jquery_1.11.3.min.js"></script>

<script>

//点击五角星看效果

var container=$('.container')

var stars=container.find('span')

stars.click(function(){

stars.removeClass('active')

var index=$(this).index()

$('.container span:lt('+(index+1)+')').addClass('active')

})

</script>

</body>

</html>

如图所示，当鼠标移上canvas区域的时候，显示星星闪烁的效果，星星本身还会有一个缓慢飘动的速度，当星星飘出canvas区域的时候，该星星消失，canvas区域的某个地方又会重生一个星星。

首先准备两张图片：

背景图：girl.jpg

星星的序列帧图片：star.png

js库：commonFunctions.js

项目主文件：index.html

文件目录如下：