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=utf-8" />
<title>sitchBox</title>
<style>
/* --
Version: 1.0
Description: System Style
Author: linux
-- */
/*--
Styles Index
=======
1.0 Reset
2.0 Common style
3.0 Main structure
3.1 Wrapper
3.2 Header
3.3 Containter
3.4 Footer
4.0 Clear
--*/
/* -- 1.0 Reset -- */
body,ul,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;padding:0;font:12px "宋体",'Microsoft YaHei',Arial,Helvetica,sans-serif;}
ul,ol{padding-left:0;list-style-type:none;}
img{border:0 none;}
em,i{font-style:normal;}
input,textarea,select{font-size:12px;font-size:100%;font-family:inherit;}
a:link{color:#4F14F7; text-decoration:none;}
a:hover{color:#FF9900; text-decoration:underline;}
a:visited{color:#551a8b; text-decoration:none;}
a:active{color: #cc0000;text-decoration:none;}
input[type="text"]{border:1px solid #c7c7c7; outline: 0 none;}
input[type="text"]:focus{border:1px solid #f6ca1c;}
/* -- 2.0 Common style -- */
/* -- display && float -- */
.dn{display:none;}
.db{display:block;}
.fl{float:left;}
.fr{float:right;}
/* -- position -- */
.rel{position: relative;}
.abs{position: absolute;}
/* -- 3.0 Main structure -- */
.main-wraper{padding: 5px;}
.switchBox{margin-right: 10px;}
.switch_box_l{width: 9px;height: 21px;background: url(http://files.cnblogs.com/bigboyLin/switch_box_l.gif) no-repeat;}
.switch_box_r{width: 9px;height: 21px;background: url(http://files.cnblogs.com/bigboyLin/switch_box_r.gif) no-repeat;}
.switch_box_c{height: 21px;background: url(http://files.cnblogs.com/bigboyLin/switch_box_c.gif) repeat-x;}
.switchBtn{width:60px;height: 20px;line-height:20px; text-align:center;color:#fff;font-family:'Microsoft YaHei';background: url(http://files.cnblogs.com/bigboyLin/btnSwitch_c.gif) repeat-x;top: 0px;left: 0px;cursor: pointer;z-index: 999;}
.switchBox .swichTxt{padding:0 8px;height: 20px;line-height:22px;text-align:center;font-family:'Microsoft YaHei';color: #797e81;text-decoration: none;}
.switchBtn-l{width: 8px;height: 20px;line-height:20px; text-align:center;color:#fff;font-family:'Microsoft YaHei';background: url(http://files.cnblogs.com/bigboyLin/btnSwitch_l.gif) no-repeat;position:absolute;top: 0px;left: -6px;cursor: pointer;}
.switchBtn-r{width: 8px;height: 20px;line-height:20px; text-align:center;color:#fff;font-family:'Microsoft YaHei';background: url(http://files.cnblogs.com/bigboyLin/btnSwitch_r.gif) no-repeat;position:absolute;top: 0px;right: -6px;cursor: pointer;}
/* -- 4.0 Clear -- */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both }
.clearfix { zoom: 1 }
/*topbar*/
.topbar{background:#ceeeff;padding:10px 5px;border:1px solid #A6D4EA;margin-top:5px;}
.topbar .tit{color: #00578F;font-size: 14px;font-weight: bold;}
</style>
</head>
<body>
<div class="main-wraper">
<!--BEGIN topbar -->
<div class="topbar clearfix">
<div class="boxwrap fr">
<div class="switchBox fl" id="timeList" style="width:300px;" typeId="time">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="switch_box_l"></td>
<td class="switch_box_c rel">
<span class="abs switchBtn" >
<i class="switchBtn-l"></i>
<i class="switchBtn-r"></i>
<span class="curTxt">24小时</span>
</span>
<a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a>
<a href="javascript:void(0);" class="swichTxt" id="48">48小时</a>
<a href="javascript:void(0);" class="swichTxt" id="72">72小时</a>
</td>
<td class="switch_box_r"></td>
</tr>
</table>
</div>
<div class="switchBox fl" id="cityList" typeId="city">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="switch_box_l"></td>
<td class="switch_box_c rel">
<span class="abs switchBtn" >
<i class="switchBtn-l"></i>
<i class="switchBtn-r"></i>
<span class="curTxt">城市</span>
</span>
<a href="javascript:void(0);" class="swichTxt" id="city">城市</a>
<a href="javascript:void(0);" class="swichTxt" id="station">站点</a>
</td>
<td class="switch_box_r"></td>
</tr>
</table>
</div>
</div>
</div>
<!-- END topbar -->
</div>
</div>
<script type="text/javascript" src="http://files.cnblogs.com/bigboyLin/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/bigboyLin/switchbox.js"></script>
<script type="text/javascript">
$(function(){
//初始化滑动div
loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');
//点击回调函数
function loadData(){
}
});
</script>
</body>
</html>
HTML结构：
<div class="boxwrap fr"><!--容器 开始-->
<div class="switchBox fl" id="timeList" typeId="time">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="switch_box_l"></td>
<td class="switch_box_c rel">
<span class="abs switchBtn" >
<i class="switchBtn-l"></i>
<i class="switchBtn-r"></i>
<span class="curTxt">24小时</span>
</span>
<a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a>
<a href="javascript:void(0);" class="swichTxt" id="48">48小时</a>
<a href="javascript:void(0);" class="swichTxt" id="72">72小时</a>
</td>
<td class="switch_box_r"></td>
</tr>
</table>
</div>
<div class="switchBox fl" id="cityList" typeId="city">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="switch_box_l"></td>
<td class="switch_box_c rel">
<span class="abs switchBtn" >
<i class="switchBtn-l"></i>
<i class="switchBtn-r"></i>
<span class="curTxt">城市</span>
</span>
<a href="javascript:void(0);" class="swichTxt" id="city">城市</a>
<a href="javascript:void(0);" class="swichTxt" id="station">站点</a>
</td>
<td class="switch_box_r"></td>
</tr>
</table>
</div>
</div><!--容器 结束-->
初始化函数：
/*@.boxwrap :滑动按钮父容器，同一界别的滑动按钮必须包含在同一个容器中
*@loadData :点击按钮后回调函数
*@#frameMain : 加载内容的iframe Id
*@tab.html : 提交参数的页面
*/
loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');
完整demo：
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>sitchBox</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main-wraper">
<!--BEGIN topbar -->
<div class="topbar clearfix">
<div class="boxwrap fr">
<div class="switchBox fl" id="timeList" typeId="time">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="switch_box_l"></td>
<td class="switch_box_c rel">
<span class="abs switchBtn" >
<i class="switchBtn-l"></i>
<i class="switchBtn-r"></i>
<span class="curTxt">24小时</span>
</span>
<a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a>
<a href="javascript:void(0);" class="swichTxt" id="48">48小时</a>
<a href="javascript:void(0);" class="swichTxt" id="72">72小时</a>
</td>
<td class="switch_box_r"></td>
</tr>
</table>
</div>
<div class="switchBox fl" id="cityList" typeId="city">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="switch_box_l"></td>
<td class="switch_box_c rel">
<span class="abs switchBtn" >
<i class="switchBtn-l"></i>
<i class="switchBtn-r"></i>
<span class="curTxt">城市</span>
</span>
<a href="javascript:void(0);" class="swichTxt" id="city">城市</a>
<a href="javascript:void(0);" class="swichTxt" id="station">站点</a>
</td>
<td class="switch_box_r"></td>
</tr>
</table>
</div>
</div>
</div>
<!-- END topbar -->
<div class="main-conent">
<iframe src="tab.html" frameborder="0" width="100%" frameborder="0" height="500" id="frameMain"></iframe>
</div>
</div>
<script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script/switchbox.js"></script>
<script type="text/javascript">
$(function(){
//初始化滑动div
loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');
});
//点击回调函数
function loadData(){
var obj = arguments[0];
var params = "";
var url ="tab.html?";
if(typeof obj !="undefined" && obj !=null){
var value = obj.value;
var type = obj.type;
var param =type+"="+value;
params = param+"&";
$('[typeId="'+type+'"]').siblings().each(function(k){
var param = $(this).attr('typeId')+"="+$(this).attr('selVal');
params+=param+"&";
});
params = params.substring(0,params.length-1);
url = url + params;
alert("切换到..."+url);
loadUrl('#frameMain', url);
}
}
</script>
</body>
</html>
JS:
/**
* 滑动div初始化函数
* @wrap 所属顶层容器
* @fn 点击后回调函数
* @iframe 子页面加载
* @url 提交的页面
*/
function loadSwitchBox(wrap, fn, iframe, url) {
$(".switchBox").each(function() {
var id = $(this).attr("id");
var type = $(this).attr("typeId");
createSlideDiv(id, type, fn);
});
loadDataInit(wrap, url, iframe);
}
/**
*初始化数据
*@wrap 顶层容器
*@url 提交的页面
*@iframe 加载子页面
*/
function loadDataInit(wrap, url, iframe) {
var params = "";
var url = url + "?";
$(wrap).find('div[typeId]').each(function() {
var param = $(this).attr('typeId') + "=" + $(this).attr('selVal');
params += param + "&";
});
params = params.substring(0,params.length-1);
url = url + params;
alert("初始化.."+ url);
loadUrl(iframe, url);
} /**
*@iframe 加载内容页面
*@url url
*/
function loadUrl(iframe, url) {
$(iframe).attr('src', url);
} /**
* 创建一个滑动div容器
* @wrapperId 容器ID
* @type 切换标签的类型
* @fnCallBack 回调函数
*/
function createSlideDiv(wrapperId, type, fnCallBack) {
calTabWidth(wrapperId); //初始化容器宽度
var $wraper = $('#' + wrapperId);
//默认选中第一项
var default_padding = 5;
var default_BtnWidth = $wraper.find('.swichTxt').eq(0).width() + default_padding;
var $switchBtn = $wraper.find('.switchBtn');
$switchBtn.width(default_BtnWidth); //浮动按钮宽度
$wraper.find('.swichTxt').eq(0).addClass('cur'); //设置选中选项
$wraper.attr('selVal', $wraper.find('.swichTxt').eq(0).attr('id')); //添加click事件
$wraper.find('.swichTxt').click(function() {
var default_padding = 5;
var newIndex = $(this).index(),
oldIndex = $wraper.find('.cur').index(),
curTxt = $(this).html(),
eleWidth = $(this).width() + default_padding,
value = $(this).attr('id');
distant = -1;
$wraper.attr('selVal', value);
distant = moveWidth(wrapperId, oldIndex, newIndex); //计算滑动距离
//回调函数参数 点击标签的类型 和 值
var obj = {
type: type,
value: value
}; //左移动
if (newIndex > oldIndex) {
$wraper.find(".switchBtn").animate({
'left': '+=' + distant + 'px'
}, function() {
$wraper.find('.curTxt').html(curTxt);
$wraper.find("#switchBtn").width(eleWidth);
//执行回调函数
if ($.isFunction(fnCallBack)) fnCallBack(obj);
});
oldIndex = newIndex;
} else if (newIndex < oldIndex) { //右移动
$wraper.find(".switchBtn").animate({
'left': '-=' + distant + 'px'
}, function() {
$(this).find('.curTxt').html(curTxt);
$wraper.find(".switchBtn").width(eleWidth);
//执行回调函数
if ($.isFunction(fnCallBack)) fnCallBack(obj);
});
oldIndex = newIndex;
}
$wraper.find('.cur').removeClass('cur');
$(this).addClass('cur');
});
} /**
*计算容器宽度
* @wrapperId 容器id
*/
function calTabWidth(wrapperId) {
var $wraper = $('#' + wrapperId);
var wrapperWidth = 0;
var tdSpace = 18; //左右圆角宽度
var oPadding = 5; //元素默认间距
$wraper.find('.swichTxt').each(function(i) {
wrapperWidth += $(this).outerWidth() + oPadding;
});
wrapperWidth = wrapperWidth + tdSpace;
$wraper.width(wrapperWidth);
} /**
*计算按钮移动距离
* @wrapperId 容器id
* @oldIndex 之前选中的选项索引
* @newIndex 当前点击选项索引
*/
function moveWidth(wrapperId, oldIndex, newIndex) {
var $wraper = $('#' + wrapperId);
var width = 0;
//向右移动
if (oldIndex < newIndex) {
var $s_btn = $wraper.find(".switchBtn");
var $a_btn = $wraper.find('.swichTxt').eq(newIndex - 1);
//当前span左侧位置离左边的距离
var curBtn = $s_btn.offset().left;
//目标标签左侧位置离左边的距离
var einA = $a_btn.offset().left;
width = parseInt(einA - curBtn + 9); //?
} else { //向左移动
var $s_btn = $wraper.find(".switchBtn");
var $a_btn = $wraper.find('.swichTxt').eq(newIndex - 1);
//当前span左侧位置离左边的距离
var curBtn = $s_btn.offset().left;
//目标标签左侧位置离左边的距离
var einA = $a_btn.offset().left;
width = parseInt(curBtn - einA);
}
return width;
}
实例下载：
jQuery滑动开关按钮效果的更多相关文章
- [Jquery]滑动门效果
$(function(){ var $box=$("#box"); var $img=$box.find("img"); var imgWid ...
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- animate 实现滑动切换效果
今天和大家分享一下用 animate 实现滑动切换效果的小例子 ------- 来自<一只有梦想的前端小白> 大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: slideDo ...
- jQuery 滑动方法slideDown向下滑动元素
通过 jQuery可以在元素上创建滑动效果,jQuery slideDown() 方法用于向下滑动元素. jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以 ...
- jQuery的动画效果
jQuery 是一个 JavaScript 库.jQuery 库可以通过一行简单的标记被添加到网页中. <script type="text/javascript" src= ...
- FlexSlider是一个非常出色的jQuery滑动切换插件
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...
- 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果
工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
- jQuery操作之效果
jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...
- jquery 滑动取值
JavaScript 滑动条效果 jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示
随机推荐
- centos6.8上PHP5.3升级到PHP5.4及更高版本方法
执行命令下载.安装yum源,当前是针对Centos6并且64位版本的源: [root@T_249 yum.repos.d]# rpm -ivh http://dl.fedoraproject.org/ ...
- 日期控件datepicker的使用
引入JS: <script type="text/javascript" src="static/my/js/bootstrap-datepicker.min.js ...
- Going Home HDU - 1533 费用流
http://acm.hdu.edu.cn/showproblem.php?pid=1533 给一个网格图,每两个点之间的匹配花费为其曼哈顿距离,问给每个的"$m$"匹配到一个&q ...
- percona mysql server5.7基于gtid的主从复制
配置mysql基于gtid主从复制架构 一.二进制安装mysql [root@node5 data]# --Linux.x86_64.ssl101.tar.gz [root@node5 data]# ...
- Solidworks设计电路外形导入AltiumDesigner
将实际设计好的三维电路图的底板(单个零件模式下)轮廓另存为dwf或者dwg 这时候会出现一个选项框,需要进行一些设置 单位选择mm,这个按照自己的需求选择单位 单位映射选择为1mm,也就是1:1的比例 ...
- 天宝MB-Two：无法打开web登陆界面
在浏览器中访问http://192.168.1.100,正常是打开MB-Two芯片的web 登陆界面,但是事与愿违,打开的是帮助界面. 解决办法: 用串口调试助手,波特率默认是115200,连接过去. ...
- web中绝对路径换虚拟路径
最近在做一个web项目,将图片上传到服务器后,再访问时拿到的是绝对路劲,而需要的是虚拟路劲.经过一番折腾找到了下列方法可以直接转换. /// <summary> /// 将W ...
- TIMESTAMPDIFF用法
TIMESTAMPDIFF用法: TIMESTAMPDIFF(interval,datetime_expr1,datetime_expr2) 返回日期或日期时间表达式datetime_expr1 和d ...
- 【进阶3-5期】深度解析 new 原理及模拟实现（转）
这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://github.com/yygmind/blog/issues/24 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的 ...
- Confluence 6 恢复一个站点有关使用站点导出为备份的说明
推荐使用生产备份策略.我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 ho ...