jquery多条件筛选插件_类似淘宝商品属性选择特效代码

jquery多条件筛选插件_类似淘宝商品属性选择特效代码3539
jQuery(document).ready(function() {    viewInit(); //初始化选择项背景百分比    setTimeout(function() { //填充选择项背景        m_move();    },    800);    $('.rightBtn').hover(function() {        $(this).css('color', '#9bdaf3');    },    function() {        $(this).css('color', '#666');    })    //点击筛选项    $('.skillbar').click(function() {        Cho(this);    })});//初始化左移筛选项动画function m_move() {    $('.mainMiddle').animate({        left: 0    },    200)}//点击筛选项function Cho(cho) {    var tp = $(cho).find('.skillbar-title span').html(); //获取点击对应值    var cl = $(cho).attr('data-percent'); //标记    var type = $(cho).attr('data-type'); //获取本筛选项的类型    //构造选中div    var div = "<div class='o_choose " + type + "' data-type='" + type + "'>" + tp + "<span class='o_close " + cl + "' onclick='o_(this)' data-percent='" + cl + "'>x</span></div>"    if ($('.' + cl).length == 1) {        $('.options').prepend(div);    }    $(cho).parent().removeClass('m_point').addClass('m_point2') $(cho).parent().find('.skillbar-bar').removeClass('barbg').addClass('changeBg');    $(cho).find('.skillbar-bar').removeClass('changeBg').addClass('clickBg');    if ($('.o_close').length > 0) {        if ($('.clearAll').length == 0) {            o_open(); //筛选栏下拉            var span = "<div class='clearAll' onclick='removeAllClose()' style='background: none;color: #666;cursor: pointer;'>清除全部</div>"$('.o_choose:last-child').after(span);        }    }    t = 0;}//清楚所有筛选项function removeAllClose() {    $('.person').remove();    $('.o_choose,.clearAll').remove();    o_();}//筛选栏拉伸var isopen = false;function o_open() {    if (isopen) {        $('#mOpen').html('展开');        $('.mainPart').animate({            height: '250px'        },        500);        isopen = !isopen;    } else {        $('#mOpen').html('收起');        $('.mainPart').animate({            height: '370px'        },        500);        isopen = !isopen;    }};//删除筛选项function o_(obtn) {    $(obtn).parent().remove();    var cl = $(obtn).attr('data-percent');    $("." + cl).parent().parent().removeClass('m_point2').addClass('m_point1') $("." + cl).find('.skillbar-bar').removeClass('clickBg').addClass('changeBg');    if ($('.o_close').length == 0) {        $('.clearAll').remove();        o_open(); //筛选栏回收    }    if ($('.major').length == 0) {        $('.lei1').removeClass('m_point2').addClass('m_point');        $('.lei1').find('.skillbar-bar').removeClass('changeBg').removeClass('clickBg').addClass('barbg')    }    if ($('.nationality').length == 0) {        $('.lei2').removeClass('m_point2').addClass('m_point');        $('.lei2').find('.skillbar-bar').removeClass('changeBg').removeClass('clickBg').addClass('barbg')    }    if ($('.csi').length == 0) {        $('.lei3').removeClass('m_point2').addClass('m_point');        $('.lei3').find('.skillbar-bar').removeClass('changeBg').removeClass('clickBg').addClass('barbg')    }    if ($('.he').length == 0) {        $('.lei4').removeClass('m_point2').addClass('m_point');        $('.lei4').find('.skillbar-bar').removeClass('changeBg').removeClass('clickBg').addClass('barbg')    }}//筛选栏左右移动function moveLeft(btn) {    $(".mainMiddle").animate({        left: '0'    },    "fast");    $(btn).css('color', '#ccc') $(btn).unbind("mouseenter").unbind("mouseleave");    $('.rightBtn').hover(function() {        $(this).css('color', '#9bdaf3');    },    function() {        $(this).css('color', '#666');    })}function moveRight(btn) {    $(".mainMiddle").animate({        left: '-325px'    },    "fast");    $(btn).css('color', '#ccc') $(btn).unbind("mouseenter").unbind("mouseleave");    $('.leftBtn').hover(function() {        $(this).css('color', '#9bdaf3');    },    function() {        $(this).css('color', '#666');    })}//初始化各单位数量进度条背景填充百分比等function viewInit() {    //初始化各项进度条填充背景百分比    $('.skillbar').find('.skillbar-bar').animate({        width: '60%'    },    800);    $('.skillbar').find('.skill-bar-percent').html('60');}

也许你还喜欢