快捷導(dǎo)航

利用jQuery實現(xiàn)滑動開關(guān)按鈕效果（附demo源碼下載）

更新時間：2017年02月07日 15:54:29 作者：Lyzh

這篇文章主要介紹了利用jQuery實現(xiàn)滑動開關(guān)按鈕效果，文中給出了詳細的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡介，下面來一起看看吧。

首先來看看要實現(xiàn)的效果圖：

HTML結(jié)構(gòu)如下：

<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);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="swichTxt" id="24" >24小時</a>
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="swichTxt" id="48">48小時</a>
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="swichTxt" id="city">城市</a>
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="swichTxt" id="station">站點</a>
   </td>
   <td class="switch_box_r"></td>
  </tr>
  </table>
 </div>
 </div><!--容器 結(jié)束-->

初始化函數(shù)：

/*@.boxwrap :滑動按鈕父容器，同一界別的滑動按鈕必須包含在同一個容器中
 *@loadData :點擊按鈕后回調(diào)函數(shù)
 *@#frameMain : 加載內(nèi)容的iframe Id
 *@tab.html : 提交參數(shù)的頁面
 */
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="external nofollow" 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);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="swichTxt" id="24" >24小時</a>
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="swichTxt" id="48">48小時</a>
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="swichTxt" id="city">城市</a>
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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');
 });
 //點擊回調(diào)函數(shù)
 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初始化函數(shù)
 * @wrap 所屬頂層容器
 * @fn 點擊后回調(diào)函數(shù)
 * @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);
}
/**
 *初始化數(shù)據(jù)
 *@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 加載內(nèi)容頁面
 *@url url
 */
function loadUrl(iframe, url) {
 $(iframe).attr('src', url);
}

/**
 * 創(chuàng)建一個滑動div容器
 * @wrapperId 容器ID
 * @type 切換標(biāo)簽的類型
 * @fnCallBack 回調(diào)函數(shù)
 */
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'); //設(shè)置選中選項
 $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); //計算滑動距離
 //回調(diào)函數(shù)參數(shù) 點擊標(biāo)簽的類型 和 值
 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);
  //執(zhí)行回調(diào)函數(shù)
  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);
  //執(zhí)行回調(diào)函數(shù)
  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 當(dāng)前點擊選項索引
 */
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);
 //當(dāng)前span左側(cè)位置離左邊的距離
 var curBtn = $s_btn.offset().left;
 //目標(biāo)標(biāo)簽左側(cè)位置離左邊的距離
 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);
 //當(dāng)前span左側(cè)位置離左邊的距離
 var curBtn = $s_btn.offset().left;
 //目標(biāo)標(biāo)簽左側(cè)位置離左邊的距離
 var einA = $a_btn.offset().left;
 width = parseInt(curBtn - einA);
 }
 return width;
}

實例下載：點擊此處

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: