js+css实现星级评分

代码如下


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>startRatingtitle>
    <style>
        .container{
            height:200px;
            width:400px;
            border:1px solid #D3D3D3;
            box-shadow: 10px 10px 5px #D3D3D3;
        }
        .rating{
            width:180px;
            height:30px;
        }
        li{
            list-style-type: none;
        }
        .item-star{
            width:30px;
            height:30px;
            float: left;
            background-image: url(./img/images/star_03.png) ;
            background-repeat: no-repeat;
            cursor: pointer;
            background-size: auto;
        }
    style>
head>

<body>
    <div class="container">
        <ul id="rating" class="rating">
            <li class="item-star" title="很好" >li>
            <li class="item-star" title="好">li>
            <li class="item-star" title="一般">li>
            <li class="item-star" title="不好">li>
            <li class="item-star" title="很不好">li>
        ul>
    div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js">script>
<script>
//    console.log($);
    var num = 2;
    $rating = $("#rating");
    $item = $rating.find(".item-star");

    var lightOn = function (num) {
      
        $item.each(function (index) {
      
            if (index < num){

                $(this).css("background-position","-21px -5px");
            }else {
                $(this).css("background-position","-103px -5px");
            }
        })
    };

    //初始化
    lightOn(num);

    //事件绑定
    $item.on('mouseover', function () {
      
        lightOn($(this).index()+1);
    }).on('click',function(){
      
        num = $(this).index()+1;
    });

    $rating.on('mouseout',function () {
      
        lightOn(num);
    })

script>
body>
html>

文件目录结构如下:

js+css实现星级评分_第1张图片

运行结果:

js+css实现星级评分_第2张图片

提示

这只是简单实现了功能,如果加入项目中,则需考虑全局变量的问题。

  1. 可以命名自己的变量,然后将更多的变量作为属性添加进去;
  2. 还有一种方式是闭包。

你可能感兴趣的:(前端,javascript,星级评分)