接下来，我们将看到新建的三个<div>，并插入到主div中
quotient =
$(‘<div>’,
{
‘class’ : ‘jRatingColor’,
css:{
width:widthColor
}
}).appendTo($(this)),
average =
$(‘<div>’,
{
‘class’ : ‘jRatingAverage’,
css:{
width:0,
top:- starHeight
}
}).appendTo($(this)),
jstar =
$(‘<div>’,
{
‘class’ : ‘jStar’,
css:{
width:widthRatingContainer,
height:starHeight,
top:- (starHeight*2),
background: ‘url(‘+bgPath+’) repeat-x’
}
}).appendTo($(this));
首先我们分析第一个<div>，它的类名为jRatingColor，它表示默认比例，用黄色表示，它的长度为withColor,这里主要看一下它的样式表：
.jRatingColor {
background-color:#f4c239; /* bgcolor of the stars*/
position:relative; //相对定位
top:0;
left:0;
z-index:2; //这里需注意，该div的祖先即我们each函数中的this 的z-index是1，下面我们将马上看到。
height:100%;
}
第二个<div>样式表如下：
.jRatingAverage {
background-color:#f62929; //红色
position:relative;
top:0;
left:0;
z-index:2;
height:100%;
}
但在上面的程序中，初始化时，把宽度设为0（因为鼠标还没选嘛），同时改变了top值：- 星高度，这样它就和上面添加的div在纵方向上重合了。
接下来看第三个<div>,主要用来放小星星。
/** Div containing the stars **/
.jStar {
position:relative;
left:0;
z-index:3;
}
这个样式表比较简单，我们着重看一下JS中动态添加的几个属性值：
width:widthRatingContainer, //设置宽度
height:starHeight, //高度
top:- (starHeight*2), //改变纵方向的值，和上面两个<div>重合
background: ‘url(‘+bgPath+’) repeat-x’ //设置背景为小星星
属性的值设置了，但也许有人会问，问什么只看到小星星颜色是彩色的，而上面添加的前两个<div>不是具有高度的长方形颜色条吗？下面我们看一下小星星的图片就明白为什么了！
不用多说，旁边用不透明的背景，中间小星星是透明的，下面的颜色自然就显示出来了！！
接下来的语句很简单，就是设置一下最外层div容器的样式，注意z-Index属性:
$(this).css({width: widthRatingContainer,overflow:’hidden’,zIndex:1,position:’relative’});
接下来会进入相对复杂的部分，我们将关注鼠标动作及其响应效果，首先关注一个小逻辑：
