JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 用jquery实现鼠标滑动星级评分特效

用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'))    });
})
网友洛克哈特分享jquery实现鼠标滑动星级评分特效网友洛克哈特分享jquery实现鼠标滑动星级评分特效

【用jquery实现鼠标滑动星级评分特效】相关文章

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

2. jQuery星级评分插件 简单实用

3. jQuery鼠标滑动切换焦点图

4. jQuery垂直缩略图相册插件 支持鼠标滑动翻页

5. 用jQuery实现的星座鼠标随动背景源代码下载

6. 20种炫酷CSS3按钮样式和鼠标滑过特效

7. 支持鼠标拖拽滑动的jQuery焦点图

8. 一款基于jQuery的支持鼠标拖拽滑动焦点图

9. css3鼠标滑过动画

10. jQuery滑动杆打分插件 可左右滑动

本文来源:https://www.51html5.com/a1190.html

点击展开全部

﹝用jquery实现鼠标滑动星级评分特效﹞相关内容

「用jquery实现鼠标滑动星级评分特效」相关专题

其它栏目

也许您还喜欢