jquery滑动效果带进度条滑动筛选器代码



123 491 164



特效描述:滑动效果 进度条滑动 滑动筛选器 筛选器,

代码结构

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

加群请备注:从官网了解到