jquery+css实现简单的评分功能

jquery+css实现简单的评分功能

今天研究了下简单的评分功能，参考了下"http://HdhCmsTestlanxyou.info/star-rating-new-method/",感觉比较简单易用，之后自己做了下优化处理。

先看下效果图：

原理：橙色星宽度/父容器宽度 * 100 = 分值

功能：鼠标悬浮时，其左侧星星点亮

　　　鼠标滑过时，其左侧星星点亮

　　　鼠标点击时，其左侧星星点亮

　　   鼠标移开后，默认记忆上次点击的橙色星宽度

所需图片：

实现源码：

 <!  doctype html  > 
 <  html  > 
 <  head  > 
 <  meta   charset  ="utf-8"  > 
 <  script   src  ="jquery.js"   type  ="text/javascript"  ></  script  > 
 <  title  > jquery+css实现简单评分功能 </  title  > 
 <  style  >  
    .rating  {  
        float  :  left  ;  
        height  :  23px  ;  
        width  :  115px  ;  
        background  :  url('star.png') repeat-x 0 0  ;  
        cursor  :  pointer  ; 
     }  
    .rating a  {  
        display  :  block  ;  
        height  :  100%  ;  
        width  :  100%  ;  
        background  :  url('star.png') repeat-x 0 -23px  ; 
     }  
    #score  {  
        float  :  left  ;  
        margin-left  :  10px  ;  
        font-family  :  '微软雅黑'  ;  
        font-size  :  18px  ; 
     }  
    #score em  {  
        color  :  #FF6600  ;  
        font-weight  :  bold  ;  
        padding  :  10px  ; 
     } 
 </  style  > 
 </  head  > 

 <  body  > 
     <  div   id  ="rating"   class  ="rating"   ><  a  ></  a  ></  div  > 
     <  div   id  ="score"  ><  em  > 0 </  em  > 分 </  div  > 
     <  script  > 
         var   rating  =  $(  '  #rating  '  );
          var   leftRating   =   rating.offset().left,
            width   =   rating.width(),
            clickWidth   =   0  ;
        
        rating.mouseover(  function  (e){
              var   overWidth  =  parseInt(((e.pageX  -  leftRating)  /  width)*100,10); 
             $(  this  ).find(  '  a  '  ).css({  '  width  '  :(overWidth  +  '  %  '  )});
        });
        rating.mouseout(  function  (){
            $(  this  ).find(  '  a  '  ).css({  '  width  '  :(clickWidth)  +  '  %  '  });
        });
        rating.mousemove(  function  (e){
              var   hoverWidth  =  parseInt(((e.pageX  -  leftRating)  /  width)*100,10); 
             $(  this  ).find(  '  a  '  ).css({  '  width  '  :(hoverWidth  +  '  %  '  )});
        });
        rating.click(  function  (e){
            clickWidth  =  parseInt(((e.pageX  -  leftRating)  /  width)*100,10); 
             $(  this  ).find(  '  a  '  ).css({  '  width  '  :(clickWidth  +  '  %  '  )});
            $(  '  #score em  '  ).text(clickWidth);
        });
      </  script  > 
 </  body  > 
 </  html  > 

 

 

 

标签:  css ,  星星评分 ,  jquery

作者： Leo_wl

　　　　

出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于jquery+css实现简单的评分功能的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did46979