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

最新推荐文章于 2021-05-24 11:20:58 发布

转载最新推荐文章于 2021-05-24 11:20:58 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/front-end1210/archive/2013/01/29/2881586.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery和CSS实现的简单评分功能，通过调整橙色星宽度来直观展示评分，支持鼠标悬浮、滑过和点击操作，实现动态评分效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

今天研究了下简单的评分功能，参考了下"http://www.lanxyou.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:0;
        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>