<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="keywords" content="xxx" />
<meta name="description" content="xxx" />
<title>xxx</title>
<style>
/* * 2016-10-14
*/
/*全局*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#000;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
body{line-height:1;font-family:Microsoft YaHei,Helvetica,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
strong{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
img{border:0}
a{display:block;text-decoration:none}
body{background:#fff;position: relative;}
html,body{width:100%;overflow-x:hidden;}
@media only screen and (max-width:640px){html,body{font-size:25px}}
@media only screen and (max-width:540px){html,body{font-size:22.5px}}
@media only screen and (max-width:480px){html,body{font-size:18.5px}}
@media only screen and (max-width:400px){html,body{font-size:16.5px}}
@media only screen and (max-width:360px){html,body{font-size:15px}}
@media only screen and (max-width:320px){html,body{font-size:14px}}
@media only screen and (max-width:240px){html,body{font-size:13.5px}} /*公共*/
.hide{display:none}
.c8420{color: #ff8420;} /*私有*/ /*頂部tab*/
.tab_box{text-align: center;background: #fff;border-bottom: 1px solid #ebebeb;height: 50px;padding-left: 15px;box-sizing: border-box;}
.tab_box ul{width: 1000px;}
.tab_box ul li{color: #333;font-size: 16px;position: relative;float: left;text-align: center;height: 50px;width:110px;line-height: 50px;}
.tab_box .under{position: absolute;border-bottom: 2px solid #ff8420;width: 80px;bottom: 0;left: 50%;margin-left: -40px;}
.tab_box .last{margin-right: 0;}
.tab_box .on{color: #ff8420;} /*内容*/
.container{}
</style>
</head>
<body>
<!-- tab start -->
<div class="tab_box" id="tab_box">
<ul>
<li data_name="aaaa">aaaa<span class="under"></span></li>
<li data_name="bbbb">bbbb<span class="under hide"></span></li>
<li data_name="cccc">cccc<span class="under hide"></span></li>
<li data_name="dddd">dddd<span class="under hide"></span></li>
<li data_name="eeee">eeee<span class="under hide"></span></li>
<li data_name="ffff" class="last">ffff<span class="under hide"></span></li>
</ul>
</div>
<!-- tab end -->
<script src="http://valar.huainanhai.com/common/lib/zepto.1.1.3.js" type="text/javascript"></script>
<script src="http://valar.huainanhai.com/common/lib/iscroll.5.0.js"></script>
<script>
// 2016/10/17
var data_name = _get('data_name')?_get('data_name'):'';
var myscroll = null;
_init();
//初始化
function _init(){
//修改nav的宽度
setTabUlWidth();
//加载iscoll
tab_box_load();
//首次加载
if(data_name){
var obj = $('#tab_box ul li[data_name="'+data_name+'"]');
if(obj.length){
changeTab(obj);
//让tab滚动到指定tab
//将一个jQuery对象转换成DOM对象:[index]和.get(index);
var offset_left = obj[0].offsetLeft;
myscroll.scrollTo(-offset_left+110,0);
}else{
changeTab($('#tab_box ul li').eq(0));
}
}else{
changeTab($('#tab_box ul li').eq(0));
}
} // 设置tab ul的宽度
function setTabUlWidth(){
var tab_li_width = $('#tab_box li').width();
var tab_li_num = $('#tab_box li').length;
$('#tab_box ul').css('width',tab_li_num*tab_li_width+50);
} //tab点击监听
$('#tab_box ul li').on('click',function(){
changeTab($(this));
}); //切换tab
function changeTab(obj){
$('#tab_box ul li').removeClass('on');
$('#tab_box ul li span').hide();
obj.addClass('on');
obj.children('.under').show();
data_name = obj.attr('data_name');
} //加载iscoll
function tab_box_load(){
myscroll = new iScroll("tab_box",{
snap: false,
momentum: true,
vScroll: false,
hScroll: true,
hScrollbar: false,
});
} // 获取get参数
function _get(name){
//正则解释
// ()表示一个子表达式 1.在被修饰匹配次数的时候,括号中的表达式可以作为整体被修饰2.取匹配结果的时候,括号中的表达式匹配到的内容可以被单独得到
// (^|&) 匹配字符串开头或者&字符
// ([^&]*) 匹配除了&之外的字符0次或多次 相当于 {0,}
// (&|$) 匹配字符串结尾或者&字符
// match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var data = window.location.search.substr(1).match(reg);
return data!=null?decodeURIComponent(data[2]):null;
}
</script>
</body>
</html>

  

iscoll制作顶部可以左右滑动的tab的更多相关文章

  1. 3种方式实现可滑动的Tab

    1. 第一种,使用 TabHost + ViewPager 实现 该方法会有一个Bug,当设置tabHost.setCurrentTab()为0时,ViewPager不显示(准确的说是加载),只有点击 ...

  2. Android实战简易教程-第三十四枪(基于ViewPager和FragmentPagerAdapter实现滑动通用Tab)

    上一段时间写过一篇文章<基于ViewPager实现微信页面切换效果> 里面实现了相似微信Tab的页面.可是这样的实现方法有个问题.就是以后全部的代码逻辑都必须在MainActivity中实 ...

  3. ScrollView滑动到底部或顶部监听,ScrollView滑动到底部或顶部再继续滑动监听;

    ScrollView滑动到底部或顶部后,再继续滑动达到一定距离的监听: ScrollView滑动到底部或顶部的监听: /** * 监听ScrollView滚动到顶部或者底部做相关事件拦截 */ pub ...

  4. jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果

    APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...

  6. Fragment实现不支持左右滑动的Tab

    主要思想:顶部标题top.xml,中间Fragment,底部Tab导航. top.xml具体实现: <?xml version="1.0" encoding="ut ...

  7. CoordinatorLayout 嵌套 AppBarLayout RecyclerView ,通过代码控制,使得CoordinatorLayout 自动滑动到tab置顶的位置

    有两个方式可以实现 一:调用AppBarLayout,设置间距 val behavior = (appbar_layout.getLayoutParams() as CoordinatorLayout ...

  8. ViewPager+Fragment实现支持左右滑动的Tab

    主要思想:顶部标题栏top.xml,中间ViewPager(4个Fragment),底部导航 top.xml和bottom.xml在我之前的两个随笔里有,此处不再赘述. activity_main.x ...

  9. Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版

    描述: 之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的: 最近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发: APP已经完善了 ...

随机推荐

  1. Java内部类详解

    Java内部类详解 说起内部类这个词,想必很多人都不陌生,但是又会觉得不熟悉.原因是平时编写代码时可能用到的场景不多,用得最多的是在有事件监听的情况下,并且即使用到也很少去总结内部类的用法.今天我们就 ...

  2. Python字符串倒序-7. Reverse Integer

    今天做了下LeetCode上面字符串倒序的题目,突然想Python中字符串倒序都有哪些方法,于是网上查了下,居然有这么多种方法: 个人觉得,第二种方法是最容易想到的,因为List中的reverse方法 ...

  3. mysql 分表

    1.分表,即把一个很大的表达数据分到几个表中,这样每个表数据都不多. 优点:提高并发量,减小锁的粒度 缺点:代码维护成本高,相关sql都需要改动 2.分区,所有的数据还在一个表中,但物理存储数据根据一 ...

  4. 联合体(union)的使用方法及其本质

    转自:http://blog.csdn.net/huqinwei987/article/details/23597091 有些基础知识快淡忘了,所以有必要复习一遍,在不借助课本死知识的前提下做些推理判 ...

  5. iOS NSOperation 异步加载图片 封装NSOperation 代理更新

    #import <Foundation/Foundation.h> @class MYOperation; @protocol MYOperationDelecate <NSObje ...

  6. php中session原理及安全性问题

    有一点我们必须承认,大多数web应用程序都离不开session的使用.这篇文章将会结合php以及http协议来分析如何建立一个安全的会话管理机制   我们先简单的了解一些http的知识,从而理解该协议 ...

  7. http协议和浏览器缓存问题

    HTTP是超文本传输协议. HTTP是一个应用层协议,由请求和响应构成,是一个标准的客户端服务器模型.HTTP是一个无状态的协议.

  8. iOS存储的三种方式

    iOS中存储的3中方式: 1.NSUserDefaults 注意存储基本对象类型是没有问题的,但是要存储自定义对象,则要将对象内所有的属性(或是需要存储的属性)序列化,实现NSCoding协议序列化. ...

  9. What is a Database Trigger?

    Link: http://www.essentialsql.com/what-is-a-database-trigger/ Copy... What is a Database Trigger? A ...

  10. CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:

    19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...