网页常动态效果--评分

用变量score记录点击索引，当鼠标离开时用score代替index完成效果

HTML:

        <div class="box">
            <ul>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <p>评分为<span></span></p>
        </div>

CSS:

 1             .box{
 2                 width:150px;
 3                 margin:100px auto;
 4             }
 5             .box li{
 6                 width:27px;
 7                 height:28px;
 8                 background: url(images/star.gif) 0 0 no-repeat;
 9                 float: left;
10                 margin-right: 3px;
11             }
12             .box li.current{
13                 background-position: 0 bottom;
14             }

JQ:

 1             jQuery(document).ready(function($) {
 2                 var score = 0; //初始化变量用于存储分数
 3                 $('.box li').click(function(){
 4                     var index = $(this).index();
 5                     $(".box li:lt("+(index+1)+")").addClass('current');
 6                     $(".box li:gt("+(index)+")").removeClass('current');
 7                     //完成之后score = index;
 8                     score = index;
 9                     $('span').html(index+1);
10                 });
11                 $('.box li').hover(function() {
12                     var index = $(this).index();
13                     $(".box li:lt("+(index+1)+")").addClass('current');
14                     $(".box li:gt("+(index)+")").removeClass('current');
15                 }, function() {
16                     $(".box li:lt("+(score+1)+")").addClass('current');
17                     $(".box li:gt("+(score)+")").removeClass('current');
18                 });
19             });

 

posted @ 2015-09-24 11:45  十三君  阅读(192)  评论(0)  编辑  收藏  举报