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

站长资源 2025/11/2 佚名

40 1538 40

南强小屋 Design By 杰米

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

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="/UploadFiles/2021-04-02/tab.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); //".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,滑动按钮,jquery左右滑动开关

标签：

jquery,滑动开关,jquery,滑动按钮,jquery左右滑动开关

南强小屋 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

南强小屋 Design By 杰米

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

暂无利用jQuery实现滑动开关按钮效果（附demo源码下载）的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

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

jquery,滑动开关,jquery,滑动按钮,jquery左右滑动开关

javascript表达式和运算符详解

原生js和css实现图片轮播效果

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

友情链接