效果图：

<!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结构：

  1. <div class="boxwrap fr"><!--容器 开始-->
  2.             <div class="switchBox fl" id="timeList" typeId="time">
  3.             <table  cellpadding="0" cellspacing="0">
  4.                 <tr>
  5.                     <td class="switch_box_l"></td>
  6.                     <td class="switch_box_c rel">
  7.                             <span class="abs switchBtn" >
  8.                                 <i class="switchBtn-l"></i>
  9.                                 <i class="switchBtn-r"></i>
  10.                                 <span class="curTxt">24小时</span>
  11.                             </span>
  12.                             <a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a>
  13.                             <a href="javascript:void(0);" class="swichTxt" id="48">48小时</a>
  14.                             <a href="javascript:void(0);" class="swichTxt" id="72">72小时</a>
  15.                     </td>
  16.                     <td class="switch_box_r"></td>
  17.                 </tr>
  18.             </table>
  19.         </div>
  20.         <div class="switchBox fl" id="cityList" typeId="city">
  21.             <table  cellpadding="0" cellspacing="0">
  22.                 <tr>
  23.                     <td class="switch_box_l"></td>
  24.                     <td class="switch_box_c rel">
  25.                             <span class="abs switchBtn" >
  26.                                 <i class="switchBtn-l"></i>
  27.                                 <i class="switchBtn-r"></i>
  28.                                 <span class="curTxt">城市</span>
  29.                             </span>
  30.                             <a href="javascript:void(0);" class="swichTxt" id="city">城市</a>
  31.                             <a href="javascript:void(0);" class="swichTxt" id="station">站点</a>
  32.                     </td>
  33.                     <td class="switch_box_r"></td>
  34.                 </tr>
  35.             </table>
  36.         </div>
  37.         </div><!--容器 结束-->

初始化函数：

  1. /*@.boxwrap :滑动按钮父容器，同一界别的滑动按钮必须包含在同一个容器中
     *@loadData :点击按钮后回调函数
     *@#frameMain : 加载内容的iframe Id
     *@tab.html : 提交参数的页面
     */
    loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');

完整demo：

HTML:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>sitchBox</title>
  6. <link href="css/style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div class="main-wraper">
  10.     <!--BEGIN topbar  -->
  11.     <div class="topbar clearfix">
  12.         <div class="boxwrap fr">
  13.             <div class="switchBox fl" id="timeList" typeId="time">
  14.             <table  cellpadding="0" cellspacing="0">
  15.                 <tr>
  16.                     <td class="switch_box_l"></td>
  17.                     <td class="switch_box_c rel">
  18.                             <span class="abs switchBtn" >
  19.                                 <i class="switchBtn-l"></i>
  20.                                 <i class="switchBtn-r"></i>
  21.                                 <span class="curTxt">24小时</span>
  22.                             </span>
  23.                             <a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a>
  24.                             <a href="javascript:void(0);" class="swichTxt" id="48">48小时</a>
  25.                             <a href="javascript:void(0);" class="swichTxt" id="72">72小时</a>
  26.                     </td>
  27.                     <td class="switch_box_r"></td>
  28.                 </tr>
  29.             </table>
  30.         </div>
  31.         <div class="switchBox fl" id="cityList" typeId="city">
  32.             <table  cellpadding="0" cellspacing="0">
  33.                 <tr>
  34.                     <td class="switch_box_l"></td>
  35.                     <td class="switch_box_c rel">
  36.                             <span class="abs switchBtn" >
  37.                                 <i class="switchBtn-l"></i>
  38.                                 <i class="switchBtn-r"></i>
  39.                                 <span class="curTxt">城市</span>
  40.                             </span>
  41.                             <a href="javascript:void(0);" class="swichTxt" id="city">城市</a>
  42.                             <a href="javascript:void(0);" class="swichTxt" id="station">站点</a>
  43.                     </td>
  44.                     <td class="switch_box_r"></td>
  45.                 </tr>
  46.             </table>
  47.         </div>
  48.         </div>
  49.     </div>
  50.     <!-- END topbar -->
  51.     <div class="main-conent">
  52.         <iframe src="tab.html" frameborder="0" width="100%" frameborder="0" height="500" id="frameMain"></iframe>
  53.     </div>
  54.     </div>
  55.     <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
  56.     <script type="text/javascript" src="script/switchbox.js"></script>
  57.     <script type="text/javascript">
  58.     $(function(){
  59.         //初始化滑动div
  60.         loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');
  61.     });
  62.     //点击回调函数
  63.     function loadData(){
  64.         var obj = arguments[0];
  65.         var params = "";
  66.         var url ="tab.html?";
  67.         if(typeof obj !="undefined" && obj !=null){
  68.             var value = obj.value;
  69.             var type  = obj.type;
  70.             var param =type+"="+value;
  71.             params = param+"&";
  72.             $('[typeId="'+type+'"]').siblings().each(function(k){
  73.                 var param = $(this).attr('typeId')+"="+$(this).attr('selVal');
  74.                 params+=param+"&";
  75.             });
  76.             params = params.substring(0,params.length-1);
  77.             url = url + params;
  78.             alert("切换到..."+url);
  79.             loadUrl('#frameMain', url);
  80.         }
  81.     }
  82.     </script>
  83. </body>
  84. </html>

JS:

  1. /**
  2.  * 滑动div初始化函数
  3.  * @wrap 所属顶层容器
  4.  * @fn 点击后回调函数
  5.  * @iframe 子页面加载
  6.  * @url 提交的页面
  7.  */
  8. function loadSwitchBox(wrap, fn, iframe, url) {
  9.     $(".switchBox").each(function() {
  10.         var id = $(this).attr("id");
  11.         var type = $(this).attr("typeId");
  12.         createSlideDiv(id, type, fn);
  13.     });
  14.     loadDataInit(wrap, url, iframe);
  15. }
  16. /**
  17.  *初始化数据
  18.  *@wrap 顶层容器
  19.  *@url 提交的页面
  20.  *@iframe 加载子页面
  21.  */
  22. function loadDataInit(wrap, url, iframe) {
  23.     var params = "";
  24.     var url = url + "?";
  25.     $(wrap).find('div[typeId]').each(function() {
  26.         var param = $(this).attr('typeId') + "=" + $(this).attr('selVal');
  27.         params += param + "&";
  28.     });
  29.     params = params.substring(0,params.length-1);
  30.     url = url + params;
  31.     alert("初始化.."+ url);
  32.     loadUrl(iframe, url);
  33. }
  34.  
  35. /**
  36.  *@iframe 加载内容页面
  37.  *@url url
  38.  */
  39. function loadUrl(iframe, url) {
  40.     $(iframe).attr('src', url);
  41. }
  42.  
  43. /**
  44.  * 创建一个滑动div容器
  45.  * @wrapperId 容器ID
  46.  * @type 切换标签的类型
  47.  * @fnCallBack 回调函数
  48.  */
  49. function createSlideDiv(wrapperId, type, fnCallBack) {
  50.     calTabWidth(wrapperId); //初始化容器宽度
  51.     var $wraper = $('#' + wrapperId);
  52.     //默认选中第一项
  53.     var default_padding = 5;
  54.     var default_BtnWidth = $wraper.find('.swichTxt').eq(0).width() + default_padding;
  55.     var $switchBtn = $wraper.find('.switchBtn');
  56.     $switchBtn.width(default_BtnWidth); //浮动按钮宽度
  57.     $wraper.find('.swichTxt').eq(0).addClass('cur'); //设置选中选项
  58.     $wraper.attr('selVal', $wraper.find('.swichTxt').eq(0).attr('id'));
  59.  
  60.     //添加click事件
  61.     $wraper.find('.swichTxt').click(function() {
  62.         var default_padding = 5;
  63.         var newIndex = $(this).index(),
  64.             oldIndex = $wraper.find('.cur').index(),
  65.             curTxt = $(this).html(),
  66.             eleWidth = $(this).width() + default_padding,
  67.             value = $(this).attr('id');
  68.         distant = -1;
  69.         $wraper.attr('selVal', value);
  70.         distant = moveWidth(wrapperId, oldIndex, newIndex); //计算滑动距离
  71.         //回调函数参数 点击标签的类型 和 值
  72.         var obj = {
  73.             type: type,
  74.             value: value
  75.         };
  76.  
  77.         //左移动
  78.         if (newIndex > oldIndex) {
  79.             $wraper.find(".switchBtn").animate({
  80.                 'left': '+=' + distant + 'px'
  81.             }, function() {
  82.                 $wraper.find('.curTxt').html(curTxt);
  83.                 $wraper.find("#switchBtn").width(eleWidth);
  84.                 //执行回调函数
  85.                 if ($.isFunction(fnCallBack)) fnCallBack(obj);
  86.             });
  87.             oldIndex = newIndex;
  88.         } else if (newIndex < oldIndex) { //右移动
  89.             $wraper.find(".switchBtn").animate({
  90.                 'left': '-=' + distant + 'px'
  91.             }, function() {
  92.                 $(this).find('.curTxt').html(curTxt);
  93.                 $wraper.find(".switchBtn").width(eleWidth);
  94.                 //执行回调函数
  95.                 if ($.isFunction(fnCallBack)) fnCallBack(obj);
  96.             });
  97.             oldIndex = newIndex;
  98.         }
  99.         $wraper.find('.cur').removeClass('cur');
  100.         $(this).addClass('cur');
  101.     });
  102. }
  103.  
  104. /**
  105.  *计算容器宽度
  106.  * @wrapperId 容器id
  107.  */
  108. function calTabWidth(wrapperId) {
  109.     var $wraper = $('#' + wrapperId);
  110.     var wrapperWidth = 0;
  111.     var tdSpace = 18; //左右圆角宽度
  112.     var oPadding = 5; //元素默认间距
  113.     $wraper.find('.swichTxt').each(function(i) {
  114.         wrapperWidth += $(this).outerWidth() + oPadding;
  115.     });
  116.     wrapperWidth = wrapperWidth + tdSpace;
  117.     $wraper.width(wrapperWidth);
  118. }
  119.  
  120. /**
  121.  *计算按钮移动距离
  122.  * @wrapperId 容器id
  123.  * @oldIndex 之前选中的选项索引
  124.  * @newIndex 当前点击选项索引
  125.  */
  126. function moveWidth(wrapperId, oldIndex, newIndex) {
  127.     var $wraper = $('#' + wrapperId);
  128.     var width = 0;
  129.     //向右移动
  130.     if (oldIndex < newIndex) {
  131.         var $s_btn = $wraper.find(".switchBtn");
  132.         var $a_btn = $wraper.find('.swichTxt').eq(newIndex - 1);
  133.         //当前span左侧位置离左边的距离
  134.         var curBtn = $s_btn.offset().left;
  135.         //目标标签左侧位置离左边的距离
  136.         var einA = $a_btn.offset().left;
  137.         width = parseInt(einA - curBtn + 9); //?
  138.     } else { //向左移动
  139.         var $s_btn = $wraper.find(".switchBtn");
  140.         var $a_btn = $wraper.find('.swichTxt').eq(newIndex - 1);
  141.         //当前span左侧位置离左边的距离
  142.         var curBtn = $s_btn.offset().left;
  143.         //目标标签左侧位置离左边的距离
  144.         var einA = $a_btn.offset().left;
  145.         width = parseInt(curBtn - einA);
  146.     }
  147.     return width;
  148. }

实例下载：

jQuery实现按钮滑动切换.zip

jQuery滑动开关按钮效果的更多相关文章

  1. [Jquery]滑动门效果

    $(function(){    var $box=$("#box");    var $img=$box.find("img");    var imgWid ...

  2. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  3. animate 实现滑动切换效果

    今天和大家分享一下用 animate 实现滑动切换效果的小例子 ------- 来自<一只有梦想的前端小白> 大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: slideDo ...

  4. jQuery 滑动方法slideDown向下滑动元素

    通过 jQuery可以在元素上创建滑动效果,jQuery slideDown() 方法用于向下滑动元素. jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以 ...

  5. jQuery的动画效果

    jQuery 是一个 JavaScript 库.jQuery 库可以通过一行简单的标记被添加到网页中. <script type="text/javascript" src= ...

  6. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  7. 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  8. jQuery操作之效果

    jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...

  9. jquery 滑动取值

    JavaScript 滑动条效果 jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示

随机推荐

  1. gstreamer

    Abstract Ogg Vorbis is a completely open, patent-free, professional audio encoding and streaming tec ...

  2. 前端 ---JS中的面向对象

    JS中的面向对象   创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 ...

  3. JS读取.properties文件的方法

    假设有JavaScript文件叫做:readproperties.js,这个文件需要读取config.properties这个配置文件,步骤如下: 1.  下载插件jquery.i18n.proper ...

  4. vue中引入js，然后new js里的方法

    阿里云Web播放器Web端使用SDK说明:https://help.aliyun.com/document_detail/51991.html?spm=5176.11065259.1996646101 ...

  5. Confluence 6 导入模板的步骤

    第一步:检查你 Confluence 站点中安装的模板组件 查看当前已经导入到你 Confluence 站点中可用的模板组件: 以系统管理员或者 Confluence 管理员权限登录 Confluen ...

  6. Confluence 6 开始编辑 CSS

    希望编辑空间的样式表: 进入到空间,然后在左侧边栏中选择 空间工具 > 界面外观(Space tools > Look and Feel). 选择 样式表(Stylesheet)然后选择 ...

  7. deepin 桌面突然卡死

    deepin桌面突然卡死 使用快捷键Ctrl+alt+F2 重启systemctl

  8. yum -y 与yum有何区别(转载）

    在linux中,经常使用yum来进行软件的安装,更新与卸载,那我们会发现,在使用yum的时候,通常有下面两种指令模式:    ①yum install  xxx     ②yum -y install ...

  9. ionic在ios侧滑页面空白 禁用视图滑动后退

    本人在ios10左右滑动的时候,经常出现左滑页面后退,然后整个页面空白现象,只能强行退出,并重新登录,最简单的方法就是禁用侧滑后退这个功能: 在app.js上config增加如下: $ionicCon ...

  10. css样式之属性操作

    一.文本属性 1.text-align:cnter 文本居中 2.line heigth 垂直居中 :行高,和高度对应 3.设置图片与文本的距离:vertical-align 4.text-decor ...