jquery滑動效果帶進度條滑動篩選器代碼



128 511 171



特效描述:滑動效果 進度條滑動 滑動篩選器 篩選器,

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

3. HTML代碼

<!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=utf-8" />
<title>搜索滑動效果</title>
</head>
<div class="project-screening">
	<div class="project-screening-yellow"></div>
	<div class="select-1-yellow"></div>
	<div class="screening-select select-1 current"><a href="javascript:void(0)">全&nbsp;&nbsp;部</a></div>
	<div class="screening-select select-2" selval="4,6"><a href="javascript:void(0)" selval="4,6">4%~6%</a></div>
	<div class="screening-select select-3" selval="6,7"><a href="javascript:void(0)" selval="6,7">6%~7%</a></div>
	<div class="screening-select select-4" selval="7,10"><a href="javascript:void(0)" selval="7,10">7%~10%</a></div>
	<div class="screening-select select-5" selval="10,-1"><a href="javascript:void(0)" selval="10,-1">10%以上</a></div>
</div>
<script type="text/javascript">
$(".screening-select").click(function () {
	var _parent = $(this);
	var _postX = _parent.position().left;
	_parent.siblings(".screening-select").removeClass("current");
	_parent.addClass("current");
	_parent.siblings(".project-screening-yellow").animate({ width: _postX }, 300);
	_parent.siblings(".select-1-yellow").animate({ left: _postX - 5 }, 300);
	_parent.prevAll(".screening-select").css("background", "none");
	_parent.nextAll().removeAttr("style");
});
</script>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動星星打分 其他 滑動選項卡 滑動切換 進度條 進度條插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表