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

2024-11-26 18:12:39

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

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

实例下载：点击此处

总结

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

jQuery控制的不同方向的滑动(向左、向右滑动等)

引入jquery.js,复制以下代码,即可运行. <style type="text/css"> .slide { position: relative; height: 200; lightyellow; } .slide .inner { position: absolute; left: 0; bottom: 0; height: 100; lightblue; width: 100% } </style> 1.slidetoggle() 交替slided
jQuery+PHP打造滑动开关效果

本文介绍了使用jQuery.PHP和MySQL实现类似360安全卫士防火墙开启关闭的开关,可以将此功能应用在产品功能的开启和关闭功能上. 准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下: 复制代码代码如下: CREATE TABLE `pro` ( `id` int(11) NOT NULL auto_increment, `title` varchar(50) NOT NULL, `description` varchar(200)
jQuery 如何实现一个滑动按钮开关

滑动开关按钮大家在各大网站都能见到,下面小编给大家分享一篇基于jquery实现的一个滑动按钮开关效果,感兴趣的朋友可以参考下实现代码. 先给大家展示下效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery做的滑动按钮开关</title> <link rel="sty
用jquery写的菜单从左往右滑动出现

最近,刚好在研究微网站的制作,查阅了大量的资料都是关于微信3平台开发教程,几乎没有这类的介绍,不过都是第三方平台提供模板制作微站而已,后来很感谢柳峰博客最后写的微网站的解惑, "什么是微网站? 微网站是新瓶装老酒,被一些搞营销的人给神化了,以至于很多开发者都在问什么是微网站,如何开发微网站.微网站本质上就是以微信浏览器为入口的手机网站(Web APP),能够兼容Android.iOS.WP等操作系统.开发微网站用到的技术与开发普通网站一样,都是基于HTML(HTML5).CSS.Javascri
jquery实现上下左右滑动的方法

本文实例讲述了jquery实现上下左右滑动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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&
jquery实现左右滑动菜单效果代码

本文实例讲述了jquery实现左右滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果.当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/ 具
基于jquery的横向滚动条（滑动条）

查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(IE6,Firefox,Chrome).最后决定使用JQuery的Slider控件. 1. 下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js 2. Html 复制代码代码如下: <div id="topslider" runat="server"></div> <div id
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)

本文实例讲述了HTML5游戏引擎LTweenLite实现的超帅动画效果.分享给大家供大家参考,具体如下: lufylegend.js是一个开源的HTML5游戏引擎,在游戏中往往会有各种的动画,这些动画有些是flash文件,有些是视频文件,本次就来利用lufylegend制作一个帅气的游戏动画,如下图. 测试连接如下: http://lufylegend.com/demo/effects01/ 一.准备工作准备工作当然就是引擎的下载了. lufylegend.js引擎官网 http://lufy
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图.希望大家喜欢! 先来看看效果图: HTML5代码首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下: <!DOCTYPE h
Android编程实现可滑动的开关效果(附demo源码下载)

本文实例讲述了Android编程实现可滑动的开关效果.分享给大家供大家参考,具体如下: 闲着没事,把之前写的一个Demo放上来分享下.就是一个开关,实现可滑动和动画效果.不是图片切换. 好了,先上图: 完整实例代码点击此处本站下载. 直接把自定义的这个View代码放上来,有注释应该很好理解: 首先是布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&qu
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)

本文实例讲述了jQuery实现横向带缓冲的水平运动效果.分享给大家供大家参考,具体如下: 这里使用jQuery生成横向带缓冲的水平运动,用鼠标点一下才能激活,点一下以后可看到Div层在做水平运动,由此可派生出诸多的其它形式的动画效果. 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
jQuery+css3实现转动的正方形效果(附demo源码下载)

本文实例讲述了jQuery+css3实现转动的正方形效果.分享给大家供大家参考,具体如下: 主要是应用到了css3中的rotate来控制旋转角度运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l
jQuery实现可以控制图片旋转角度效果(附demo源码下载)

本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)

本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat

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

相关推荐

随机推荐