利用jQuery實現滑動開關按鈕效果（附demo源碼下載）

2019-11-19 17:41:46

字體：大中小

來源：轉載

供稿：網友

首先來看看要實現的效果圖：

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);" 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><!--容器 結束-->

初始化函數：

/*@.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="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'); }); //點擊回調函數 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;}

實例下載：點擊此處

總結

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

上一篇：javascript表達式和運算符詳解

下一篇：原生js和css實現圖片輪播效果