一. 效果图

二. 功能介绍

  1. 支持横向移动

  2. 支持点击Tab后该Tab居中

  3. 拉到最左边和最右边后依然可以拉动,只是tabs的移动距离变小。

三. 使用说明

  1. 在你的html中添加Tabs相关的代码。

<div class="analysis-tabs-title"><ul><li class="active" data-param="overview">综合分析</li><li data-param="expected_profits">预期收益</li><li data-param="bull_profits">追涨能力</li><li data-param="profit_ranking">收益排名</li><li data-param="bear_loss">抗跌能力</li><li data-param="alpha">Alpha</li><li data-param="sharpe">夏普比率</li></ul>
</div>

  2. 在你的JS中添加调用插件的代码。

    curShow: 当前选中的Tab的index。

$(".analysis-tabs-title").offsetSlider({curShow: parseInt($('.analysis-tabs-title ul').find('.active').index())
});

  3. 添加CSS样式

    tabs数量不同,注意更改ul的width。

.analysis-tabs-title {overflow: hidden;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;
}.analysis-tabs-title ul {width: 180%;display: -webkit-box;display: flex;display: -webkit-flex;-webkit-box-pack: justify;justify-content: space-between;-webkit-justify-content: space-between;
}.analysis-tabs-title ul li {padding: 10px;text-align: center;display: block;
}.analysis-tabs-title ul li:first-child {margin-left: 8px;
}.analysis-tabs-title ul li:last-child {margin-right: 8px;
}.analysis-tabs-title ul li.active {color: #8e6cd1;border-bottom: 2px solid #8e6cd1;
}

  4. JS源代码

'use strict';
(function($) {$.extend($.fn, {offsetSlider: function(obj) {this.each(function() {var $self = $(this);var dom = {"wrap": $self.find("ul"),"item": $self.find("li")};var settings = {"len": dom.item.length,"maxOffset": $('body').width() - dom.wrap.width(),"distance": 50,"startX": 0,"startY": 0,"curShow": obj ? (obj.curShow ? obj.curShow : 0) : 0};var funs = {init: function() {funs.getWidthData();funs.initUI();if (settings.len > 1) {funs.bindEvent();}},getWidthData: function() {settings.itemWidth = [];settings.FirstLiOffsetLeft = 0;settings.LiDistance = 0;dom.item.each(function() {settings.itemWidth.push($(this)[0].offsetWidth);});settings.FirstLiOffsetLeft = dom.item[0].offsetLeft;if (settings.itemWidth.length <= 1) return;settings.LiDistance = (dom.wrap.width() - 2 * settings.FirstLiOffsetLeft - eval(settings.itemWidth.join('+'))) / (settings.itemWidth.length - 1);},updateOffset: function() {if (settings.itemWidth.length <= 1) {settings.currentOffset = settings.offset = 0;} else {settings.curShow = Math.min(settings.curShow, settings.itemWidth.length - 1);var allLiWidth = 0for (var i = 0; i < settings.curShow; i++) {allLiWidth += settings.itemWidth[i];}// leftOffSet + last (n-1) li width + (n-1) * lis distance + this li width / 2; var leftDistance = settings.FirstLiOffsetLeft + allLiWidth + settings.curShow * settings.LiDistance + settings.itemWidth[settings.curShow] / 2;var currentOffset = parseInt($(window).width() / 2 - leftDistance);if (currentOffset > 0) {settings.currentOffset = settings.offset = 0;} else if (currentOffset < settings.maxOffset) {settings.currentOffset = settings.offset = settings.maxOffset;} else {settings.currentOffset = settings.offset = currentOffset;}}dom.wrap.css("-webkit-transition", "-webkit-transform 0.5s ease-in-out")dom.wrap.css("-webkit-transform", "translate3d(" + settings.currentOffset + "px, 0, 0)");},initUI: function() {if (!settings.curShow) {settings.currentOffset = settings.offset = 0;dom.wrap.css("-webkit-transform", "translate3d(0, 0, 0)");} else {funs.updateOffset();}},bindEvent: function() {dom.item.on({"click": function(e) {e.stopPropagation();settings.curShow = parseInt($(this).index());funs.updateOffset();}});$self.off().on({"touchstart": function(e) {e.stopPropagation();settings.startX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX;settings.startY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY;},"touchmove": function(e) {e.stopPropagation();e.preventDefault();var curX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX;var curY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY;var moveX = curX - settings.startX;var moveY = curY - settings.startY;if (Math.abs(moveY) > Math.abs(moveX)) {window.event.returnValue = true;} else {e.preventDefault();}dom.wrap.css("-webkit-transition", "")var val = moveX + parseInt(settings.offset);if (val < settings.maxOffset) {if (Math.abs(val - settings.maxOffset) > settings.distance) {settings.currentOffset = -settings.distance / 2 + (val - settings.maxOffset + settings.distance) / 5 + settings.maxOffset;} else {settings.currentOffset = (val - settings.maxOffset) / 2 + settings.maxOffset;}} else if (val > 0) {if (val > settings.distance) {settings.currentOffset = (val - settings.distance) / 5 + settings.distance / 2;} else {settings.currentOffset = val / 2;}} else {settings.currentOffset = val;}dom.wrap.css("-webkit-transform", "translate3d(" + settings.currentOffset + "px, 0, 0)");},"touchend": function(e) {e.stopPropagation();if (settings.currentOffset < settings.maxOffset) {dom.wrap.css("-webkit-transition", "-webkit-transform 0.5s ease-in-out")settings.currentOffset = settings.offset = settings.maxOffset;} else if (settings.currentOffset > 0) {dom.wrap.css("-webkit-transition", "-webkit-transform 0.5s ease-in-out")settings.currentOffset = settings.offset = 0;} else {settings.offset = settings.currentOffset;}dom.wrap.css("-webkit-transform", "translate3d(" + settings.currentOffset + "px, 0, 0)");},"webkitTransitionEnd": function(e) {e.stopPropagation();e.preventDefault();dom.wrap.css("-webkit-transition", "")if (settings.currentOffset < settings.maxOffset) {settings.currentOffset = settings.offset = settings.maxOffset;} else if (settings.currentOffset > 0) {settings.currentOffset = settings.offset = 0;} else {settings.offset = settings.currentOffset;}dom.wrap.css("-webkit-transform", "translate3d(" + settings.currentOffset + "px, 0, 0)");}});$(window).on({"resize": function() {funs.adjustPos();},"orientationchange": function() {funs.adjustPos();}});},adjustPos: function() {settings.maxOffset = $('body').width() - dom.wrap.width();funs.getWidthData();funs.initUI();}};funs.init();});}});
})(window.jQuery || window.Zepto);

转载于:https://www.cnblogs.com/ccblogs/p/5261292.html

多Tabs的横向滚动插件(支持Zepto和jQuery)相关推荐

  1. Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)

    Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架)   插件名称:javascript-API-Completions 支持Javascript.J ...

  2. android listview 横向滚动,Android支持水平滚动的ListView控件

    前言 ListView是一个纵向滚动的列表视图,也有朋友嵌套HorizontalScrollView来实现,比如这里,但在ListView的API中明确指明了两者不可同时使用.本文分享一种办法,以方便 ...

  3. 移动端-手机端-日历选择控件(支持Zepto和JQuery)

    一. 效果图 二. 功能说明 1. 支持切换年份,月份. 2. 支持点击选中日期,也可以点击确定选择日期. 三. 使用方法 1. 添加Input 在你的页面中添加Input输入框.可以再html里,也 ...

  4. 谷歌插件webscraper使用问疑难杂症(插件页面跑到右边+爬取内容乱序+自定义选择多个列表+滚动抓取社交发帖+select鼠标无法选中元素+无法识别表格+插件支持范围+爬取数据与原始顺序不一致+)

    博客目录 谷歌插件webscraper使用问疑难杂症解决 1.插件打开后跑到了右边 2.爬取内容乱序 3.mac的支持这个插件吗 4.除了谷歌外,火狐.IE.360等浏览器支持吗 5.自定义选择多个列 ...

  5. js实现文字横向滚动与纵向滚动(支持手动滑动距离)

    js实现横向滚动 1.布局 <div id="scroll_div" class="fl"> <div id="scroll_beg ...

  6. swiper炫酷_swiper3d横向滚动多张炫酷切换banner

    最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...

  7. H5 实现横向滚动的方法及需要注意的地方

    现在的前端开发中,有许多页面上有设计了横向滚动,可以说横向滚动是一个很常见的场景,今天就来说说横向滚动怎么实现以及需要注意的问题. 实现横向滚动 要实现横向滚动,方式不止一种,这里我只说最简单的一种, ...

  8. jQuery全屏滚动插件 Fullpage.js 及 move.js

    Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...

  9. 片滚动插件myScroll

    在做产品展示时经常用到,此插件支持两种形式,一种手段左右滚动,一种自动播放.可控制图片显示个数,滚动间隔时间,及动画时间等. 插件参数: auto:[false,3000]   这里是个数组,第一个是 ...

最新文章

  1. Apache ServiceComb — Overview
  2. 使用线程——创建线程
  3. C#的WinForm程序应用了XP主题样式之后,ShowDialog方法出现问题的解决
  4. mysql 集中join的区别
  5. gauscoor软件怎么用_影视解说月入近万元怎么做到的,没基础照样用软件制作
  6. PIP scrapydo时报错ERROR: Command errored out with exit status 1: python setup.py egg_info Check the log
  7. request.getRequestURL()和request.getRequestURI()区别
  8. 【图论】Kruskal算法求最小生成树详解
  9. java时间往后一天_往后余生,不能再陪你了
  10. SSO单点登录系统解决方案
  11. 性别为什么不适合建立索引-值重复率高的字段不适合建索引
  12. sqlserver中65535_Sql Server数据导出EXCEL 解决行数超过65535问题
  13. 用python使用py2neo时候报“ModuleNotFoundError:No module named 'py2neo'”的错误
  14. uni-app获取当前时间日期及之后7天和星期几
  15. 基于 RFID 与 ZigBee 智能汽车装配生产线车模追溯系统设计
  16. 论文排版——Latex页眉页脚设定(中英都可以适用)
  17. 第3课 弹性之城--故事卡--跟阿西莫夫故事接龙
  18. c语言 空指针解引用,【缺陷周话】第一期:空指针解引用
  19. 时间序列-预测:概述【Time Series Forecasting (TSF) 】【时间序列既可以做回归任务,也可以做分类任务】【预测是回归问题,不是分类问题】
  20. 知识图谱总体构建思路(流程图)

热门文章

  1. RTX30系列-Ubuntu系统配置与深度学习环境Pytorch配置
  2. NIOS II 内核使用 之 代码保存FLASH(EPCSX芯片)
  3. 【学习笔记】欧拉公式证明(定义法、泰勒公式法)
  4. 有关VScode 配置MinGW32_9.2.0+OpenGL+GLFW+GLAD
  5. 国土规划之双评价的主要数据类型与来源(甲B)
  6. 国内10个千年古镇 绝美春色洗涤你的眼
  7. Unity如何接入应用内购In-AppPurchase
  8. 【翻译】Kinect v2程序设计(C++) Depth编
  9. 免费实时汇率查询Api接口
  10. python递归函数例题_递归案例python