利用jQuery实现滑动开关按钮效果（附demo源码下载）

首先来看看要实现的效果图：

HTML结构如下：

  

  

  

   

   

    
    
    
    24小时
    
    24小时
    48小时
    72小时
   
   

  
  
 
 

  

  

   

   

    
    
    
    城市
    
    城市
    站点
   
   

  
  
 
 

初始化函数：

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

完整demo：

HTML:

 
 

 

  

  

  

   

   

    
    
    
    24小时
    
    24小时
    48小时
    72小时
   
   

  
  
 
 

  

  

   

   

    
    
    
    城市
    
    城市
    站点
   
   

  
  
 
 
 
 
 

 
 
 
 
 
 

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;
}

实例下载：点击此处

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。