利用jQuery实现滑动开关按钮效果（附演示源码下载)

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

超文本标记语言结构如下：

div class='boxwrap fr '！-容器开始- div类='配电盘fl ' id=' time list ' typeId=' time '表格单元格填充=' 0 '单元格间距=' 0 ' tr TD class=' switch _ box _ l '/TD TD TD TD class=' switch _ box _ c rel ' span class=' ABS switch BTN ' I class=' switch BTN-l '/I class=' switch BTN-r '/I span class=' curxt ' 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 ' class=' swichxt ' 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 ' class=' swichxt ' 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 ' class=' swichxt ' id=' 72 ' 72小时/a/TD类=' switch _ box _ r '/TD/tr/table/div类='配电盘fl ' id='城市列表' typeId=' city ' table单元格填充=' 0 '单元格间距=' 0 ' tr TD class=' switch _ box _ l '/TD class=' switch _ box _ c rel ' span class=' ABS switch BTN ' I class=' switch BTN-l '/I class=' switch BTN-r '/I span class=' curxt '城市/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 ' class=' swichxt ' 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 ' class=' swichxt ' id=' station '站点/a/TD TD class=' switch _ box _ r '/TD/tr/table/div/div！-容器结束-初始化函数：

/*@.boxwrap :滑动按钮父容器，同一界别的滑动按钮必须包含在同一个容器中*@loadData :点击按钮后回调函数*@#frameMain :加载内容的iframe Id *@tab.html :提交参数的页面*/load配电盘('。boxwrap '、loadData '、#frameMain '、' tab。html ')；完整演示：

HTML:

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title sitch box/title link href=' CSS/style。CSS“rel=”外部no跟随“rel=”样式表type=' text/CSS '/headdydiv class=' main-wrapper '！-BEgin topbar-div class=' topbar clear fix ' div class=' box wrap fr ' div class='配电盘fl ' id=' time list ' typeId=' time '表格单元格填充=' 0 '单元格间距=' 0 ' tr TD class=' switch _ box _ l '/TD TD TD class=' switch _ box _ c rel ' span class=' ABS switch BTN ' I class=' switch BTN开关BTN开关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 ' class=' swichxt ' 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 ' class=' swichxt ' 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 ' class=' swichxt ' id=' 72 ' 72小时/a/TD类=' switch _ box _ r '/TD/tr/table/div类='配电盘fl ' id='城市列表' typeId=' city ' table单元格填充=' 0 '单元格间距=' 0 ' tr TD class=' switch _ box _ l '/TD class=' switch _ box _ c rel ' span class=' ABS switch BTN ' I class=' switch BTN-l '/I class=' switch BTN-r '/I span class=' curxt '城市/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 ' class=' swichxt ' 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 ' class=' swichxt ' id=' station '站点/a/TD TD class=' switch _ box _ r '/TD/tr/table/div/div/div！-END topbar-div class=' main-conent ' iframe src=' http : '选项卡。html '框架边框=' 0 '宽度=' 100% '框架边框=' 0 '高度=' 500 ' id=' frame main '/iframe/div/div脚本类型=' text/JavaScript ' src=' http : script/jquery-1。11 .1 .量滴js /脚本脚本类型=' text/JavaScript ' src='初始化滑动差异配电盘('。boxwrap '、loadData '、#frameMain '、' tab。html ')；});//点击回调函数函数loadData(){ var obj=参数[0];var params=var url='tab.html '？if(typeof obj！='undefined' obj！=null){ var值=obj。价值；var type=obj . typevar param=type '='值；参数=参数"";$('[TypeID=' Type ' ']').兄弟姐妹()。每个（函数(k){ var param=$(this)).attr('typeId') '=' $(this).attr(' SelVal ')；参数=参数"";});params=params.substring(0，params。长度-1)；url=url参数；警报('切换到.'网址)；loadUrl('#frameMain '，URl)；} }/脚本/正文/htmlJS:

/** * 滑动差异初始化函数* @换行所属顶层容器* @fn点击后回调函数* @iframe子页面加载* @url提交的页面*/function LoadScebox(wrap，fn，iframe，url) { $(').配电盘')。每个（函数(){ var id=$(this)).attr(' id ')；定义变量类型=$(这个).attr(' TypeID ')；createSlideDiv(id，类型，fn)；});loadDataInit(包装、url、iframe)；}/** *初始化数据* @换行顶层容器*@url提交的页面*@iframe加载子页面*/function loadDataInit(wrap，url，iframe){ var params=' '；var url=url '？'；$(包装)。find('div[typeId]').每个（函数(){ var param=$(this)).attr('typeId') '=' $(this).attr(' SelVal ')；参数=参数"";});params=params.substring(0，params。长度-1)；url=url参数；警报('初始化.'网址)；loadUrl(iframe，URl)；}/** *@iframe加载内容页面* @网址网址*/函数loadUrl(iframe，url) { $(iframe).attr('src '，URL)；}/** * 创建一个滑动差异容器* @wrapperId容器标识* @类型切换标签的类型* @fnCallBack回调函数*/函数createSlideDiv(wrapperId，type，fnCallBack){ calTabWidth(wrapperId)；//初始化容器宽度var $ wrapper=$(' # ' wrapperId)；//默认选中第一项var default _ padding=5；var default _ BtnWidth=$ wrapper。查找(' .swichxt ').等式(0).width()default _ padding；var $ switchBtn=$ wraper.find ' .开关Btn’)；$ SwitChBtn。宽度(默认_ Btnwidth)；//浮动按钮宽度$ wraper.find ' .swichxt ').等式(0).添加CLaSS(' cur ')；//设置选中选项$包装。attr(' selVal '，$ wraper.find(' .swichxt ').等式(0).attr(' id ')；//添加点击事件$ wraper.find ' .swichxt ').click(function(){ var default _ padding=5；var newIndex=$(this).index()，oldIndex=$ wraper.find ' .cur ').index()，curxt=$(this).html()，eleWidth=$(this).width() default_padding，value=$(this).attr(' id ')；distant=-1；$包装。attr(' selVal '，值);distant=moveWidth(wrapperId，oldIndex，new index)；//计算滑动距离//回调函数参数点击标签的类型和值var obj={ type: type，value : value }；//左移动if(NewIndex OLd index){ $ wrapper。查找(' .开关Btn’.animate({ ' left ' : '=' distant ' px ' }，function(){ $ wrapper。查找(' .curxt ').html(curxt)；$包装。查找(' # SwitChBtn ').宽度(eleWidth)；//执行回调函数if ($ .is FuncTion(fn callback))fn callback(obj)；});oldIndex=new index } else if(new index oldIndex){//右移动$ wraper.find ' .开关Btn’.animate({ ' left ' : '-=' distant ' px ' })，function() { $(this).查找('。curxt ').html(curxt)；$ wraper.find ' .开关Btn’.宽度(eleWidth)；//执行回调函数if ($ .is FuncTion(fn callback))fn callback(obj)；});oldIndex=new index } $ wrapper . find ' .cur ').移除CLaSS(' cur ')；$(这个)。添加CLaSS(' cur ')；});}/** *计算容器宽度* @wrapperId容器id */函数calTabWidth(wrapperId){ var $ wrapper=$(' # ' wrapperId)；var wrapperWidth=0；var tdSpace=18//左右圆角宽度var Opadding=5；//元素默认间距$ wraper.find ' .swichxt ').每个（函数(i) { wrapperWidth=$(this)).out width()Opadding；});包装宽度=包装宽度TdSpace$包装。宽度(包装宽度)；}/** *计算按钮移动距离* @wrapperId容器id * @oldIndex之前选中的选项索引* @newIndex当前点击选项索引*/函数moveWidth(wrapperId，oldIndex，new index){ var $ wrapper=$(' # ' wrapperId)；定义变量宽度=0;//向右移动if(OLdindex new index){ var $ s _ BTN=$ wrapper。查找(' .开关Btn’)；var $ a _ btn=$ wraper.find ' .swichxt ').eq(新指数-1)；//当前跨度左侧位置离左边的距离var curBtn=$ s _ btn.offset().向左；//目标标签左侧位置离左边的距离var einA=$a_btn.offset().向左；width=parsent(eInA-Corbtn 9)；//?} else { //向左移动var $ s _ btn=$ wraper.find(' .开关Btn’)；var $ a _ btn=$ wraper.find ' .swichxt ').eq(新指数-1)；//当前跨度左侧位置离左边的距离var curBtn=$ s _ btn.offset().向左；//目标标签左侧位置离左边的距离var einA=$a_btn.offset().向左；width=parsent(Corbtn-eInA)；}返回宽度；}实例下载：点击此处

总结

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。