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

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 = "

" + tp + "x

" 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 = "

清除全部

"$('.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');}

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

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»