用jquery实现鼠标滑动星级评分特效

         此作品是一款非常实用的星级评分Jquery特效,虽然简单但是很实用,只用了Jquery的一些基础功能就实现了,非常适合网友们学习哦,大家好好看一下吧。


核心代码如下:

$(function(){

    var flag = 1;  

    $(‘.star_ul a’).hover(function(){

        flag = 1;

        $(‘.star_ul a’).removeClass(‘active-star’);

        $(this).addClass(‘active-star’);

        $(‘.s_result’).css(‘color’,'#c00′).html($(this).attr(‘title’))

    },function(){

        if( flag == 1){

        $(this).removeClass(‘active-star’);
        $(‘.s_result’).css(‘color’,'#333′).html(‘请打分’)

        }

    });

    $(‘.star_ul a’).click(function(){

         flag = 2;

        $(this).addClass(‘active-star’);

        $(‘.s_result’).css(‘color’,'#c00′).html($(this).attr(‘title’))

        });

    $(‘.square_ul a’).hover(function(){

        flag = 3;

        $(‘.square_ul a’).removeClass(‘active-square’);

        $(this).addClass(‘active-square’);

        $(this).parents(‘.starbox’).find(‘.s_result_square’).css(‘color’,'#c00′).html($(this).attr(‘title’))

    },function(){

        if(flag == 3){

        $(this).removeClass(‘active-square’);

        $(this).parents(‘.starbox’).find(‘.s_result_square’).css(‘color’,'#333′).html(‘请打分’)

    }
    });

    $(‘.square_ul a’).click(function(){

        flag = 4;

        $(this).addClass(‘active-square’);

        $(this).parents(‘.starbox’).find(‘.s_result_square’).css(‘color’,'#c00′).html($(this).attr(‘title’))    });

})


摘自: 移动开发网

你可能感兴趣的:(移动开发,HTML5,jquery,Jquery特效,星级评分Jquery特效)