微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：jQuery作者：编程之家

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

HTML结构如下：

rush:xhtml;">
Boxwrap fr">
Box fl" id="timeList" typeId="time"> Box_l">Box_c rel"> 24小时 Box_r">
Box fl" id="cityList" typeId="city">
Box_l">Box_c rel"> Box_r">

初始化函数：

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

完整demo：

HTML:

rush:xhtml;"> sitch<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>
Boxwrap fr">
Box fl" id="timeList" typeId="time">
Box_l">Box_c rel"> 24小时 Box_r">
Box fl" id="cityList" typeId="city">
Box_l">Box_c rel"> Box_r">

JS:

/*
@iframe 加载内容页面
@url url
/
function loadUrl(iframe,url) {
$(iframe).attr('src',url);
}

/**

  • 创建一个滑动div容器
  • @wrapperId 容器ID
  • @type 切换标签的类型
  • @fnCallBack 回调函数
    */
    function createSlideDiv(wrapperId,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,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;
    }

实例下载：

总结

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

jqueryjquery左右滑动开关滑动开关滑动按钮

相关推荐

jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(&quot;.list_r&quot;).find(&#39;span&#39;).css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 &#39;color&#39;: &quot;#838792&quot;
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: &lt;span id=&quot;time&quot;&gt;&lt;/span&gt; js: &lt;script src=&quot;Js/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;%--引用jQuery
jQuery 添加水印
jQuery 添加水印 &lt;script src=&quot;../../../../AJs/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(document).re
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&quot;&lt;script type=&#39;text/javascript&#39;&gt;alert(&quot;XXX&quot;);&lt;/script&gt;&quot;); 此方只能调用内部函数
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 &lt;%@ Page Language=&quot;C#&quot; Auto
.Net后台调用js，提示、打开新窗体、关闭当前窗体
.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write(&quot;&lt;script&gt;window.alert(&#39;支付成功!&#39;);window.open(&#39;/JkCommerce/&quot; + href + &quot;&#39;,&
.net 搜索联想词
思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。 前台 &lt;div class=&quot;sc_con&quot; id=&quot;bbsearch&quot;&gt; &lt;input type=&quot;text&quot; class=&
JS点击子元素不触发父元素点击事件(js阻止冒泡)
&lt;html&gt; &lt;title&gt;&lt;/title&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;style type=&quot;text/css&quot;&gt; .divone{width:100
jQuery表单验证提交：前台验证一
jQuery表单验证提交：前台验证一（图文+视频）
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot