常见的Tab左右滚动效果前言：Tab效果是常见的网页效果，可以实现的方式有很多，使用较为普遍的就是通过jquery的鼠标事件实现内容的隐藏、显示或者淡入淡出效果。下面我们来学习通过左右滚动效果来实现Tab效果，通过左右滚动的效果给用户更为舒适的体验。Tab左右滚动实现和轮播图差不多，都是通过相应盒子marginLeft值而实现，当然也可通过上下滚动实现，看自己需求，修改对应的动画效果即可。
基本知识：HTML+CSS+jQuery下面是要实现的两种常见的样式案例：
注意：不管需要实现怎样的动画效果，都首先应当将对应的样式写好，然后在思考对应的逻辑事件方式。
案列一：
实现效果：通过将鼠标上移动到相关栏目时，栏目内容发生相应的改变，栏目内容通过左右滚动的方式与之栏目对应。其次，为了让滚动效果更为舒适，再添加一个栏目下标的滚动。鼠标移动到那个栏目下标线也跟着滚动。操作：1、新建一个的空白的HTML和CSS文档
2、插入jquery公共库、和关联CSS
3、根据效果案例一，写出对应的HTML布局和CSS样式结构分析：1、由于需要实现滚动，所以必然存在一个div盒子实现超出隐藏2、栏目是从左到右排列，所以需要左浮动3、栏目内容滚动，所以也需要左浮动设置ＨＴＭＬ：栏目一栏目二栏目三
栏目四栏目内容一栏目内容二栏目内容三栏目内容四CSS：{margin:0;padding:0;}/边框内边距和外边距清零/
#tab{/这是包裹栏目和栏目内容的div盒子/width:400px;/宽度设置/height:250px;/高度设置/overflow:hidden;/超出隐藏/border:1pxsolidblack;/边框设置：宽度、实线、颜色/margin:0auto;/居中对其/margin-top:30px;/顶部外边距/position:relative;/相对定位/}#tab_key{/这是包裹栏目的盒子/width:400px;/宽度设置/height:50px;/高度设置/background-color:bisque;/背景色/
}#gun{/这是栏目下标线的盒子/position:absolute;/绝对定位/width:100px;/宽度设置/
height:2px;/高度设置/background-color:blue;/背景色/top:49px;/据顶部距离/}#tab_keyli{/这是栏目的盒子/width:80px;/宽度设置/margin:15px10px;/外边距：上下15像素左右10像素/list-style:none;/列表默认点状图标清除/float:left;/左浮动/text-align:center;/文本居中/cursor:pointer;/鼠标样式/}#tab_content{/包裹栏目内容的盒子/
width:500%;/宽度设置/}#tab_contentdiv{/栏目内容盒子/width:400px;/宽度设置/height:200px;/高度设置/float:left;/左浮动/padding-top:15px;/内边距——顶部距离/}.c1{background-color:aqua;/背景色/}.c2{background-color:blueviolet;/背景色/
}.c3{background-color:aquamarine;/背景色/}.c4{background-color:cadetblue;/背景色/}关于栏目下标线的说明：为了更好自由滚动，这里将栏目下标线设置为绝对定位，与之对应需要一个父级元素设置相对定位，设置top为栏目的高度就可以自然的显示在栏目的下方。
jQuery：Jquery逻辑分析：事件源：栏目事件：鼠标事件
效果功能函数：栏目内容对应滚动，下标线对应滚动由于栏目和栏目内容、下标线滚动是一一对应关系，鼠标移动到栏目二，栏目内容也滚动显示栏目内容二，下标线也在栏目二的下面，所以动画效果需要序列号对应，为此定义一个变量index(栏目序列号)栏目内容的一个滚动宽度，为一个栏目内容的宽度下标线的一个滚动宽度，为一个栏目的宽度
效果起始：移动到栏目二
移动到栏目三
//因为是截图看不出缓慢移动的效果，有兴趣的朋友可以自己复制代码，查看效果
案列二：
效果：鼠标移动到栏目上，栏目内容与之对应滚动操作：1、新建一个的空白的HTML和CSS文档
2、插入jquery公共库、和关联CSS
3、对应案列二，写出对应的HTML和CSS样式1、栏目为竖着排列，所以不用浮动设置2、栏目内容需要左右滚动所以，所以仍然需要浮动设置，其实需要一个包裹一个超出隐藏的div盒子HTML：栏目一栏目二栏目三
栏目四栏目内容一栏目内容二栏目内容三栏目内容四CSS：
#tab1{width:500px;/宽度设置/height:300px;/高度设置/margin:0auto;/盒子居中/margin-top:30px;/外边距：顶部30px/}#tab_box{/包裹栏目的盒子/width:100px;/宽度/height:400px;/高度/float:left;/左浮动/}#tab_boxli{/栏目盒子/list-style:none;/清除li默认样式/
margin:10px;/上下左右外边距10px/padding:15px;/上下左右内边距15px/background-color:#DEB887;/背景色/cursor:pointer;/鼠标样式/}
#tab_main{/使得栏目内容超出隐藏的盒子/float:left;/左浮动/width:380px;/宽度/height:300px;/高度/overflow:hidden;/超出隐藏/margin:10px;/外边距/}#tab_post{width:400%;/包裹栏目内容的盒子/}#tab_postdiv{width:380px;/宽度/height:280px;/高度/
float:left;/左浮动/}.c1{background-color:aqua;/背景色/}.c2{background-color:blueviolet;/背景色/}.c3{background-color:aquamarine;/背景色/}.c4{background-color:cadetblue;/背景色/
}jQuery:
Jquery逻辑分析：事件源：鼠标移动到的当前栏目事件：鼠标事件效果功能函数：栏目内容对应滚动通过改变包裹栏目内容盒子的marginleft值实现左右滚动的效果效果起始：
鼠标移动栏目二：鼠标移动栏目三：
|
|
