经典实用的筛选效果，网店常用到的一种网页特效，通过jquery实现完美的用户体验效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>网店常用筛选滑动选择特效_武鸣人</title>
<style type="text/css">
*{padding:0;margin:0;}
body{font:12px "\5B8B\4F53",san-serif;color:#3e2d1b;background:#fff8e6 url(/img/20240302_www_wuming_ren_2.gif) repeat-x;text-size-adjust:none;}
.fl{float:left;}
.fr{float:right;}
ul,li{list-style:none;}
.bk{font-size:1px;height:0;line-height:1px;display:block;clear:both;overflow:hidden;}
h1,h2,h3,h4,h5,h6,em,i{font-size:12px;font-weight:normal;}
.cf{*zoom:1;}
.cf:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}
em,cite,th,i,b,q,blockquote{font-style:normal;}
a{text-decoration:none;color:#3e2d1b;}
a:hover{text-decoration:underline;color:#8b631b;}
.cf{*zoom:1;}
.cf:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}
.solid_Line{background:url(/img/20240302_www_wuming_ren_3.gif) repeat-x 0 -1125px;height:2px;}
.www_wuming_ren{background:url(/img/20240302_www_wuming_ren_4.gif) repeat-y;margin-bottom:8px;}
.www_wuming_ren h4{float:left;font-weight:bold;font-size:14px;padding-left:18px;margin-right:10px;}
.www_wuming_ren h4 a{padding:0 5px;}
.www_wuming_ren .B{background:url(/img/20240302_www_wuming_ren_5.gif) no-repeat 0 100%;padding-bottom:5px;}
.www_wuming_ren .C{padding:5px;}
.www_wuming_ren .title{background:url(/img/20240302_www_wuming_ren_6.gif) no-repeat;height:38px;line-height:38px;}
.www_wuming_ren h4{float:left;font-weight:bold;font-size:14px;padding-left:18px;}
.www_wuming_ren h4 a{padding:0 5px;}
.www_wuming_ren dl{padding:20px 0 0 120px;width:640px;position:relative;}
.www_wuming_ren dl dt{text-align:right;width:110px;display:block;position:absolute;left:0;top:20px;}
.www_wuming_ren dl dd{;}
.www_wuming_ren dl dd a{padding:0 0 15px 0;display:block;width:25%;height:14px;overflow:hidden;outline:none;float:left;color:#255e00;}
.www_wuming_ren dl dd a:hover{color:#dd3800;}
.www_wuming_ren dl dd a.cur{color:#dd3800;}
.wwwwww_wuming_rennet{padding:9px 0;}
.wwwwww_wuming_rennet span{display:none;font-size:12px;background:url(/img/20240302_www_wuming_ren_3.gif) no-repeat 100% -1803px;height:20px;padding-right:16px;text-align:center;margin:0 5px;float:left;position:relative;}
.wwwwww_wuming_rennet cite{display:inline-block;background:url(/img/20240302_www_wuming_ren_3.gif) no-repeat 0 -1760px;height:20px;line-height:20px;padding:0 5px;}
.wwwwww_wuming_rennet i{display:inline-block;width:16px;height:20px;overflow:hidden;position:absolute;top:0;right:0;cursor:pointer;}
.SeachScroll{padding:4px 0 0;height:42px;padding:1px 0 0\0;height:45px\0;width:484px;float:left;color:#4b3a0e;}
* + html .SeachScroll{padding:1px 0 0;height:45px;width:484px;float:left;color:#4b3a0e;}
* html .SeachScroll{padding:1px 0 0;height:45px;width:494px;float:left;color:#4b3a0e;}
.SeachScroll .ScrollBg{height:8px;width:448px;background:url(/img/20240302_www_wuming_ren_7.gif) no-repeat 0 -12px;margin:0 0 0 9px;position:relative;}
.SeachScroll .ScrollBg .tip{display:inline-block;background:url(/img/20240302_www_wuming_ren_3.gif) no-repeat 100% -1939px;height:21px;float:left;position:absolute;left:-13px;top:-26px;padding-right:5px;color:#e7c6bd;}
.SeachScroll .ScrollBg .tip_L{display:inline-block;background:url(/img/20240302_www_wuming_ren_3.gif) no-repeat 0 -1905px;padding-left:5px;height:21px;float:left;}
.SeachScroll .ScrollBg .tip_C{display:inline-block;background:url(/img/20240302_www_wuming_ren_8.gif) no-repeat center 0;height:21px;line-height:18px;float:left;}
.SeachScroll .ScrollBg .SrcrollCurBG{background:url(/img/20240302_www_wuming_ren_7.gif) repeat-x 0 0;height:8px;position:absolute;left:0;top:0;overflow:hidden;}
.SeachScroll .ScrollBg .TsDiv{width:484px;height:8px;overflow:hidden;position:absolute;left:0;top:0;z-index:999;overflow:hidden;}
.SeachScroll .ScrollBg a{display:block;width:8px;height:8px;padding:0 18px;float:left;text-indent:-9999px;cursor:pointer;overflow:hidden;}
.SeachScroll .ScrollBg a.cur{background-position:0 -38px;}
.SeachScroll .txtWrap{line-height:20px;height:20px;}
.SeachScroll i{display:block;width:24px;text-align:center;padding-right:20px;float:left;}
#Price_tip,#Discount_tip{float:left;width:100px;padding-top:5px;overflow:hidden;cursor:pointer;}
#Price_tip:hover,#Discount_tip:hover{text-decoration:none;}
</style>
<script src="/img/jquery-wuming.js" type="text/javascript"></script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div style="width:772px; margin:0 auto">
<div class="www_wuming_ren cf">
<div class="B">
<div class="title">
<h4><a href="">折扣促销</a></h4>
<span class="fl">您已选择:</span>
<div class="wwwwww_wuming_rennet">
<span><cite id="Web_text"></cite><i></i></span>
<span><cite id="Type_text"></cite><i></i></span>
<span><cite id="Discount_text"></cite><i></i></span>
<span><cite id="Price_text"></cite><i></i></span>
</div>
</div>
<div class="C">
<dl>
<dt>按网站选择:</dt>
<dd id="Web"><a href="javascript:void(0);" rel="1" hidefocus="true">武鸣人1</a> <a href="javascript:void(0);" rel="2" hidefocus="true">武鸣人2</a> <a href="javascript:void(0);" rel="3" hidefocus="true">武鸣人3</a> <a href="javascript:void(0);" rel="4" hidefocus="true">武鸣人4</a> <a href="javascript:void(0);" rel="5" hidefocus="true">武鸣人5</a> <a href="javascript:void(0);" rel="6" hidefocus="true">武鸣人6</a></dd>
</dl>
<span class="bk solid_Line"></span>
<dl>
<dt>按商品类别选择:</dt>
<dd id="Type"><a href="javascript:void(0);" rel="1" hidefocus="true">武鸣人商品源码1</a> <a href="javascript:void(0);" rel="2" hidefocus="true">武鸣人商品源码2</a> <a href="javascript:void(0);" rel="3" hidefocus="true">武鸣人商品源码3</a> <a href="javascript:void(0);" rel="4" hidefocus="true">武鸣人商品源码4</a> <a href="javascript:void(0);" rel="5" hidefocus="true">武鸣人商品源码5</a> <a href="javascript:void(0);" rel="6" hidefocus="true">武鸣人商品源码6</a></dd>
</dl>
<span class="bk solid_Line"></span>
<dl>
<dt>按折扣区间选择:</dt>
<dd id="Discount">
<div class="SeachScroll">
<div class="ScrollBg">
<div class="tip"><div class="tip_L"><div class="tip_C">不限</div></div></div>
<div class="SrcrollCurBG"></div>
<div class="TsDiv">
<a href="javascript:void(0);" rel="0" style="padding-left:0;" hidefocus="true">0</a><a href="javascript:void(0);" rel="1" hidefocus="true">1</a><a href="javascript:void(0);" rel="2" hidefocus="true">2</a><a href="javascript:void(0);" rel="3" hidefocus="true">3</a><a href="javascript:void(0);" rel="4" hidefocus="true">4</a><a href="javascript:void(0);" rel="5" hidefocus="true">5</a><a href="javascript:void(0);" rel="6" hidefocus="true">6</a><a href="javascript:void(0);" rel="7" hidefocus="true">7</a><a href="javascript:void(0);" rel="8" hidefocus="true">8</a><a href="javascript:void(0);" rel="9" hidefocus="true">9</a><a rel="10" hidefocus="true">10</a>
</div>
</div>
<div class="txtWrap">
<i>不限</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i><i>10</i>
</div>
</div>
<a id="Discount_tip" class="fl"></a>
</dd>
</dl>
<span class="bk solid_Line"></span>
<dl>
<dt>按节省金额选择:</dt>
<dd id="Price">
<div class="SeachScroll">
<div class="ScrollBg">
<div class="tip"><div class="tip_L"><div class="tip_C">不限</div></div></div>
<div class="SrcrollCurBG"></div>
<div class="TsDiv">
<a href="javascript:void(0);" rel="0" style="padding-left:0;" hidefocus="true">0</a><a href="javascript:void(0);" rel="1" hidefocus="true">50</a><a href="javascript:void(0);" rel="100" hidefocus="true">100</a><a href="javascript:void(0);" rel="150" hidefocus="true">150</a><a href="javascript:void(0);" rel="200" hidefocus="true">200</a><a href="javascript:void(0);" rel="300" hidefocus="true">300</a><a href="javascript:void(0);" rel="400" hidefocus="true">400</a><a href="javascript:void(0);" rel="500" hidefocus="true">500</a><a href="javascript:void(0);" rel="700" hidefocus="true">700</a><a href="javascript:void(0);" rel="1000" hidefocus="true">1000</a><a href="javascript:void(0);" rel="2000" hidefocus="true">2000</a>
</div>
</div>
<div class="txtWrap">
<i>不限</i><i>50</i><i>100</i><i>150</i><i>200</i><i>300</i><i>400</i><i>500</i><i>700</i><i>1000</i><i>2000</i>
</div>
</div>
<a id="Price_tip" style="float:left"></a>
</dd>
</dl>
<form action="" method="get">
<input type="hidden" value="0" id="Web_Val">
<input type="hidden" value="0" id="Type_Val">
<input type="hidden" value="0" id="Discount_Val">
<input type="hidden" value="0" id="Price_Val">
</form>
<span class="bk"></span>
</div>
</div>
</div>
</div>
需要加载js文件，请刷新页面后看效果！
<script type="text/javascript">
$(function(){
var Btn = $('.www_wuming_ren dd a');
function Tsfn(obj,type){
var Scroll = $(obj).closest('.ScrollBg').find('.SrcrollCurBG')
var Tsname = $(obj).closest('dd').attr('id')
var TsVal = $(obj).attr("rel");
var TsWidth = $(obj).innerWidth();
var Tstip = $(obj).closest('.ScrollBg').find('.tip');
if($(obj).index()==0){
var TsIndex = 1;
var TsWidth = 8;
var scrollWidth = TsWidth*TsIndex
}else{
var TsIndex= $(obj).index();
var scrollWidth = (TsWidth*TsIndex)+8;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
if(type=='TsClick'){
Scroll.stop(true,true).animate({width:scrollWidth+'px'},1000);
if(Tsname=="Discount"){
$('#'+Tsname+'_text').empty().append(TsVal+'折').closest('span').css({display:'inline-block'});
$('#'+Tsname+'_tip').html(TsVal+'折以下');
$('#'+Tsname+'_Val').val(TsVal);
}else if (Tsname=="Price"){
$('#'+Tsname+'_text').empty().append('节省'+TsVal+'元').closest('span').css({display:'inline-block'});
$('#'+Tsname+'_tip').html(TsVal+'元以上');
$('#'+Tsname+'_Val').val(TsVal);
}else{
var Tshtml = $(obj).html();
$('#'+Tsname+'_text').empty().append(Tshtml).closest('span').css({display:'inline-block'});
$('#'+Tsname+'_Val').val(TsVal);
}
}else if (type=='Tshover'){
Tstip.find('.tip_C').html(TsVal)
var TstipWidth = scrollWidth-4-(Tstip.innerWidth()/2);
Tstip.stop(true,true).animate({left:TstipWidth+'px'},1000);
}
}
//$(Btn).first().css({ 'padding-left':'0'});
Btn.click(function(){
Tsfn($(this),'TsClick');
});
Btn.mouseenter(function(){
Tsfn($(this),'Tshover');
})
var CloseBtn = $('.wwwwww_wuming_rennet i');
$(CloseBtn).click(function(){
var Closename = $(this).prev('cite').attr('id').slice(0,-5);
var Scroll = $('#'+Closename).find('.SrcrollCurBG');
var Tstip = $('#'+Closename).find('.tip');
$('#'+Closename+'_text').closest('span').hide();
Tstip.stop(true,true).animate({left:'-13px'},1000).find('.tip_C').html('不限');
$('#'+Closename+'_Val').val(0);
Scroll.stop(true,true).animate({width:0},1000);
});
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处