多Tabs的横向滚动插件(支持Zepto和jQuery)
一. 效果图
二. 功能介绍
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)相关推荐
- Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)
Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架) 插件名称:javascript-API-Completions 支持Javascript.J ...
- android listview 横向滚动,Android支持水平滚动的ListView控件
前言 ListView是一个纵向滚动的列表视图,也有朋友嵌套HorizontalScrollView来实现,比如这里,但在ListView的API中明确指明了两者不可同时使用.本文分享一种办法,以方便 ...
- 移动端-手机端-日历选择控件(支持Zepto和JQuery)
一. 效果图 二. 功能说明 1. 支持切换年份,月份. 2. 支持点击选中日期,也可以点击确定选择日期. 三. 使用方法 1. 添加Input 在你的页面中添加Input输入框.可以再html里,也 ...
- 谷歌插件webscraper使用问疑难杂症(插件页面跑到右边+爬取内容乱序+自定义选择多个列表+滚动抓取社交发帖+select鼠标无法选中元素+无法识别表格+插件支持范围+爬取数据与原始顺序不一致+)
博客目录 谷歌插件webscraper使用问疑难杂症解决 1.插件打开后跑到了右边 2.爬取内容乱序 3.mac的支持这个插件吗 4.除了谷歌外,火狐.IE.360等浏览器支持吗 5.自定义选择多个列 ...
- js实现文字横向滚动与纵向滚动(支持手动滑动距离)
js实现横向滚动 1.布局 <div id="scroll_div" class="fl"> <div id="scroll_beg ...
- swiper炫酷_swiper3d横向滚动多张炫酷切换banner
最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...
- H5 实现横向滚动的方法及需要注意的地方
现在的前端开发中,有许多页面上有设计了横向滚动,可以说横向滚动是一个很常见的场景,今天就来说说横向滚动怎么实现以及需要注意的问题. 实现横向滚动 要实现横向滚动,方式不止一种,这里我只说最简单的一种, ...
- jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
- 片滚动插件myScroll
在做产品展示时经常用到,此插件支持两种形式,一种手段左右滚动,一种自动播放.可控制图片显示个数,滚动间隔时间,及动画时间等. 插件参数: auto:[false,3000] 这里是个数组,第一个是 ...
最新文章
- Apache ServiceComb — Overview
- 使用线程——创建线程
- C#的WinForm程序应用了XP主题样式之后,ShowDialog方法出现问题的解决
- mysql 集中join的区别
- gauscoor软件怎么用_影视解说月入近万元怎么做到的,没基础照样用软件制作
- PIP scrapydo时报错ERROR: Command errored out with exit status 1: python setup.py egg_info Check the log
- request.getRequestURL()和request.getRequestURI()区别
- 【图论】Kruskal算法求最小生成树详解
- java时间往后一天_往后余生,不能再陪你了
- SSO单点登录系统解决方案
- 性别为什么不适合建立索引-值重复率高的字段不适合建索引
- sqlserver中65535_Sql Server数据导出EXCEL 解决行数超过65535问题
- 用python使用py2neo时候报“ModuleNotFoundError:No module named 'py2neo'”的错误
- uni-app获取当前时间日期及之后7天和星期几
- 基于 RFID 与 ZigBee 智能汽车装配生产线车模追溯系统设计
- 论文排版——Latex页眉页脚设定(中英都可以适用)
- 第3课 弹性之城--故事卡--跟阿西莫夫故事接龙
- c语言 空指针解引用,【缺陷周话】第一期:空指针解引用
- 时间序列-预测:概述【Time Series Forecasting (TSF) 】【时间序列既可以做回归任务,也可以做分类任务】【预测是回归问题,不是分类问题】
- 知识图谱总体构建思路(流程图)
热门文章
- RTX30系列-Ubuntu系统配置与深度学习环境Pytorch配置
- NIOS II 内核使用 之 代码保存FLASH(EPCSX芯片)
- 【学习笔记】欧拉公式证明(定义法、泰勒公式法)
- 有关VScode 配置MinGW32_9.2.0+OpenGL+GLFW+GLAD
- 国土规划之双评价的主要数据类型与来源(甲B)
- 国内10个千年古镇 绝美春色洗涤你的眼
- Unity如何接入应用内购In-AppPurchase
- 【翻译】Kinect v2程序设计(C++) Depth编
- 免费实时汇率查询Api接口
- python递归函数例题_递归案例python