五角星评分效果及一键分享功能

两种方法：

1.每颗星 创建一个div，并且设置div的背景图片，鼠标滑过改变div的背景图片。

  <div class="item" style="margin-top:100px; margin-left:100px;">

 

          <div class="formItem first" style="background-position: 0px -555px;"></div>

          <div class="formItem" style="background-position: 0px -555px;"></div>

          <div class="formItem" style="background-position: 0px -555px;"></div>

          <div class="formItem" style="background-position: 0px -555px;"></div>

          <div class="formItem" style="background-position: 0px -555px;"></div>

          <div class="formItem" style="background-position: 0px -555px;"></div>

          <div class="formItem" style="background-position: 0px -555px;"></div>

          <div class="formItem" style="background-position: 0px -555px;"></div>

          <div class="formItem" style="background-position: 0px -575px;"></div>

          <div class="formItem" style="background-position: 0px -575px;"></div>

          <p id="pointP" style="float: left; margin-left: 20px; background-position: 0px -575px;">8分</p>

        </div>

  $(".formItem").hover(function() {  

                

                $(this).prevAll().css("background-position", "0px -555px");

                $(this).css("background-position", "0px -555px");    

                $(this).nextAll().css("background-position", "0px -575px");  

              

                $("#pointP").html($(this).prevAll().length+1 +"分");  

            });  

    });

 

2. 设置一个div，div 中内嵌一个a 标签，根据鼠标的位置，计算鼠标和div 之间的宽度，然后设置a标签的宽度。

<div id="rating" class="rating" ><a></a></div>  

   var rating=$('#rating');  

            var leftRating = rating.offset().left,  

                width = rating.width(),  

                clickWidth = 0;  

            rating.click(function(e){  

                clickWidth=parseInt(((e.pageX-leftRating)/width)*100,10);  

                $(this).find('a').css({'width':(clickWidth+'%')});  

                $('#score em').text(clickWidth);  

          });