jquery星星评分效果

内部rating_btns科是我们的

和它的
• 。我们不希望我们的
  或我们
  • 来有任何保证金或填充。在
  • 需要14px宽。猜测原因。 14 × 100 = 140！是啊，你懂了。这就是我们的货柜，惊人的宽度，我知道。我们将浮动留给他们，给他们一个块显示屏使他们不去了对方，最后但并非最不重要的，更改字体显示。我们将改变字体1px，并作为背景相同的颜色。我敢肯定你问，为什么不是空的，让他们在那里没有任何文字呢？那么，我们将使用这个文本，告诉我们你jquery的脚本上空盘旋

    #rating_btns { position: relative; z-index: 100; }
    #rating_btns ul, #rating_btns li  { padding: 0; margin: 0; }
    #rating_btns li { float: left; display: block; font-size: 1px; cursor: pointer; color: #1e1d1c; }

     

     
    接下来，看看我们的rating_on部。正如它说，这是我们的分区，它包含的恒星是"开"。我们使用这样的方式相当独特。我们给它"上的"明星的背景图片，但改变它的宽度在我们上空盘旋基础。这就是为什么我们必须给予rating_btns与一个z - index的相对定位，这科，我们也将提供一个相对定位，但是一个z - 50指数。我们还将设置宽度为0px开始，所以它不会显示在它之前，我们盘旋。

     

    #rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; position: relative; z-index: 50; top: -21px; }
    

     

    给我们的最后一个分区，分区的评价，这包含三个小div的，随着细胞的行为，一个包含选定的评价，另一个包含了形象的明星，而最后一个包含我们的编辑联系。

    我还没有得到对jquery，因此我将只显示你的css，以及此html。

     

    #rated { display: none; padding: 3px 0px 3px 2px; background-color: #1e1d1c; font-size: 11px;color: #ffc910;}
    #rated div { display: block; float: left; }
    #rating { font-size: 11px; font-family: arial, helvetica, sans-serif; color: #ffc910; padding-left: 3px; }
    #small_stars { background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line- margin-top:3px; }
    #rate_edit { line- font-size: 11px; font-family: arial, helvetica, sans-serif; color: #fff; padding-left: 9px; cursor: pointer; }
    #rate_edit:hover { text-decoration: underline; }
    

    
    

    not rated

    
    

    –  

    
    

     

    
    

    edit

    
    

    
    since this will be used to send a rating from a form, we will add a hidden form field to be sent. this will be updated from jquery.

    1。 ratewidth功能
    这个函数接受来自我们的jquery函数变量的评级，将其转换为一个整数，使用一个switch语句来确定宽度值，然后返回的宽度，使我们的rating_on分区中的明星。 （显示星级）。

    function ratewidth($rating){
    $rating = parsefloat($rating);
    switch ($rating){
    case 0.5: $; break;
    case 1.0: $; break;
    case 1.5: $; break;
    case 2.0: $; break;
    case 2.5: $; break;
    case 3.0: $; break;
    case 3.5: $; break;
    case 4.0: $; break;
    case 4.5: $; break;
    case 5.0: $; break;
    default:  $84px";
    }
    return $width;
    }

     

     
    starsprite功能
    我用创建星级两种不同的方法。使用较少的一个网页，一个使用更多。对于这显示当你做出评价小星星，我想少用html和使用的雪碧方法来显示评级。但它确实为ratewidth同样的事情，但决定的背景定位根据所提供的评级。

     

    function starsprite($rating){
    $rating = parsefloat($rating);
    switch ($rating){
    case 0.5: $pos = "-11px"; break;
    case 1.0: $pos = "-22px"; break;
    case 1.5: $pos = "-33px"; break;
    case 2.0: $pos = "-44px"; break;
    case 2.5: $pos = "-55px"; break;
    case 3.0: $pos = "-66px"; break;
    case 3.5: $pos = "-77px"; break;
    case 4.0: $pos = "-88px"; break;
    case 4.5: $pos = "-99px"; break;
    case 5.0: $pos = "-110px"; break;
    default:  $pos =  "-77px";
    }
    return $pos;
    }

    3。 jquery的悬停功能*
    悬停功能将检测光标在我们

  • 's和它的价值盘旋，然后发送价值，ratewidth功能让我们的宽度。然后，指定宽度的＃rating_on部。

    $('#rating_btns li').hover(function(){
    $rating = $(this).text();
    $('#rating_on').css('width', ratewidth($rating));
    });

    4。 mouseo教程ut函数
    该mouseout功能正是如此，告诉什么明星应mouseout显示。但是，我们不希望明星重置每次我们去了星星，特别是如果我们已经选择了一个等级。因此，我们抓住了我们的价值＃等级分区，如果它是"不评为"我们确定我们的宽度为0px但如果它不等于"不评为"我们把它的宽度的设定值。如果你选择了一个评价它默认返回到它时，你mouseout方式。

    $('#rating_btns li').mouseout(function(){
    $rating = $('#rating').text();
    if($rating == "not rated"){
    $('#rating_on').css('width', "0px");
    }
    else{
    $('#rating_on').css('width', ratewidth($rating));
    }
    });

     

     
    5。按功能
    这个函数有一个多一点去比其他的人。当您单击在
  • 它的价值首先抓起点击
  • 分配到＃等级分区，使用starsprite函数来分配为＃small_stars科背景的位置，然后隐藏分区＃rating_btns和＃ rating_on部。一旦隐藏的，它很好地消失在＃额定部。

     

    $('#rating_btns li').click(function(){
    $rating = $(this).text();
    $('#rating').text($rating);
    $('#rating_output').val($rating);
    $pos = starsprite($rating);
    $('#small_stars').css('background-position', "0px " + $pos );
    $('#rating_btns').hide();
    $('#rating_on').hide();
    $('#rated').fadein();
    });

    编辑功能
    这个函数只是隐藏分区＃额定在两个div消失，我们只是躲了起来。在＃＃rating_btns rating_div和分区。

    $('#rate_edit').click(function(){
    $('#rated').hide();
    $('#rating_btns').fadein();
    $('#rating_on').fadein();
    });

     

     
    好了下面来看综合实例 jquery 星星评论效果

     

    
    
    
    
    
    
    
    
    
    
    

    
    

    
    

    
    
    • 0.5
    
    
    • 1.0
    
    
    • 1.5
    
    
    • 2.0
    
    
    • 2.5
    
    
    • 3.0
    
    
    • 3.5
    
    
    • 4.0
    
    
    • 4.5
    
    
    • 5.0
    
    

    
    

    
    

     

    
    

    
    

    not rated

    
    

    –  

    
    

     

    
    

    edit

    
    

    
    

    
    
    
    

    
    juqery代码

    /*
    * written by eligeske
    * downloaded from eligeske.com
    * have fun. nerd.
    */
    $(document).ready(function(){
    // hover
    $('#rating_btns li').hover(function(){
    $rating = $(this).text();
    $('#rating_on').css('width', ratewidth($rating));
    });
    // mouseout
    $('#rating_btns li').mouseout(function(){
    $rating = $('#rating').text();
    if($rating == "not rated"){
    $('#rating_on').css('width', "0px");
    }
    else{
    $('#rating_on').css('width', ratewidth($rating));
    }
    });
    //click
    $('#rating_btns li').click(function(){
    $rating = $(this).text();
    $('#rating').text($rating);
    $('#rating_output').val($rating);
    $pos = starsprite($rating);
    $('#small_stars').css('background-position', "0px " + $pos );
    $('#rating_btns').hide();
    $('#rating_on').hide();
    $('#rated').fadein();
    });
    //edit
    $('#rate_edit').click(function(){
    $('#rated').hide();
    $('#rating_btns').fadein();
    $('#rating_on').fadein();
    });
    function ratewidth($rating){
    $rating = parsefloat($rating);
    switch ($rating){
    case 0.5: $; break;
    case 1.0: $; break;
    case 1.5: $; break;
    case 2.0: $; break;
    case 2.5: $; break;
    case 3.0: $; break;
    case 3.5: $; break;
    case 4.0: $; break;
    case 4.5: $; break;
    case 5.0: $; break;
    default:  $84px";
    }
    return $width;
    }
    function starsprite($rating){
    $rating = parsefloat($rating);
    switch ($rating){
    case 0.5: $pos = "-11px"; break;
    case 1.0: $pos = "-22px"; break;
    case 1.5: $pos = "-33px"; break;
    case 2.0: $pos = "-44px"; break;
    case 2.5: $pos = "-55px"; break;
    case 3.0: $pos = "-66px"; break;
    case 3.5: $pos = "-77px"; break;
    case 4.0: $pos = "-88px"; break;
    case 4.5: $pos = "-99px"; break;
    case 5.0: $pos = "-110px"; break;
    default:  $pos =  "-77px";
    }
    return $pos;
    }
    });