整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
本文介绍利用JQ实现垂直导航功能，可点击左导航栏切换右边数据，也可滚动右边数据切换左导航栏标签，实现左右联动效果，效果如下：
html、css和js代码如下：
1、html和css代码相对比较简单，可自行查看；
2、js代码：
1）$(window).scroll实现滚动右边数据切换左导航栏的标签：
11、“($(this).offset().top-$(window).innerHeight()/2))”影响滚动位置切换；
12、scroll_t定时器必须加，不然点击切换会有抖动效果；
2）tabs.children('li').click实现点击左导航栏切换右边数据。
小白，你最近看CSS的时候碰到position属性了么？"
“碰到了，通过position可以改变容器的定位，我记得官方描述是这样的：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。”
“恩，不错，今天咱说一下position里面的fixed类型吧，这个属性值是让容器基于浏览器窗口的绝对定位，在我们平时的制作中经常会碰到。”
老朱接着说：“给一个容器设定position为fixed以后，可以通过left、right、bottom、top进行四个方向的距离定位。现在我们在页面中写一个fixed容器，看一下代码片段。”
“你看，这里我在body里面加了一个标识为foot的div，然后他的css里面把position设置成了fixed，并且bottom（距离底部）为0，这里的bottom是基于浏览器窗口的距离进行计算的，foot的宽和高也进行了设定。现在我们看一下效果！”
“你可以看到，拖动滚动条往下滚动网页的时候，foot的位置并不会随着滚动条的滚动发生改变，它就像是漂浮在那里一样。这里的foot是一个div容器，所以它的内部我们还可以放任何你希望布局的内容，比如放一个图片，或者其他的容器。”
“这里插入的图片要想跟foot容器宽度一致，根据我们之前说过的对图片css的操作，把图片的宽度（width）设定为100%，图片就会自动与父容器宽度一致了。”
小白突然想到了很多手机HTML5页面下方都有导航条，问道：“很多手机的HTML5页面里面下方的导航条不会随着页面的滚动而滚动，这种导航条是不是也通过fixed来设定的。”
“是的，跟这里的foot一样，我们只需要把导航条的父容器设定为fixed就可以了。有个需要注意的地方是导航条会根据手机屏幕的分辨率自动占用屏幕宽度，所以我们在给foot设定css样式的时候就不能设定宽度了。”
小白问道：“那应该怎么设定呢？”
老朱说：“你忘了我们刚说了fiex可以通过top、right、bottom、left设定四个方向的距离么？如果要让一个fixed容器左右靠边，我们只需要left为0，right为0，它就会自动匹配窗口的宽度。现在我们把之前的foot容器改一下。”
“通过设定bottom、left、right可以让foot靠近底部并且保持与窗口宽度一致。然后我们在foot里面放了一个ul-li容器，让li容器向左浮动并且宽度为父容器的25%，布局就会变成这样。”
“网页上的底部导航通常都会放入透明的png图片，现在我们插入png图，再进行一下css的调整。”
“网页底部导航条，上面还会牵扯到鼠标事件，焦点样式变化，这些知识我们随后也会一一展开讨论，今天先这样吧！你先练习练习今天说的这些内容，然后试着做一个居中漂浮的层，看看能不能做出来！”
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！
天给大家分享一个网站Swiper中文网，在开发网页过程中，关于幻灯片这块，我基本都是直接用它的插件，非常好用！
关于Swiper
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。
目前，有很多优秀网站都在使用Swiper
具体的可以直接访问官网地址：http://www.swiper.com.cn
Swiper优点 |
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端 |
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果 |
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择 |
Swiper常用于移动端网站的内容触摸滑动 |
Swiper拥有灵活的progress，这是自定义制作3D切换效果的利器 |
Swiper制作3D切换效果的方法多种多样。cube、coverflow和flip可以轻松的实现3D过渡，如果你想制作其他新颖的切换方式，推荐使用progress。 |
progress可以帮助你获取到滑块的进度索引。 |
例如：watchSlidesProgress
开启这个参数来计算每个slide的progress(进度、进程)，Swiper的progress无需设置即开启。
对于slide的progress属性，活动的那个为0，其他的依次减1。例：如果一共有6个slide，活动的是第三个，从第一个到第六个的progress属性分别是：2、1、0、-1、-2、-3。
对于swiper的progress属性，活动的slide在最左（上）边时为0，活动的slide在最右（下）边时为1，其他情况平分。例：有6个slide，当活动的是第三个时swiper的progress属性是0.4，当活动的是第五个时swiper的progress属性是0.8。
swiper的progress其实就是wrapper的translate值的百分值，与activeIndex等属性不同，progress是随着swiper的切换而不停的变化，而不是在某个时间点突变。
watchSlidesProgress参数 | |||
类型： | boolean | 默认： | false |
举例： | true | 启用版本： | 4.0.0 |
更多功能，可以直接访问官网：Swiper中文网 [http://www.swiper.com.cn]
Swiper 4 的特色功能
不依赖框架： | Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等 |
1:1的触摸滑动： | Swiper默认的触摸比例为1:1，你可以通过修改Swiper的设置来改变这个比例。 |
监视器： | Swiper可以通过设置开启监视器，有了这个功能Swiper可以在你动态改变Dom或Swiper的样式时自动重新初始化并计算所需的元素。 |
丰富的API： | Swiper 拥有丰富的API，允许你建立自己独特的分页器、导航、视差滚动、或其他精彩的效果 |
多行slides布局： | Swiper允许多行Slides布局，这样每行的slide就会较少。 |
过渡效果： | 增加了三种新的过渡效果：淡入、3D方块、3D流。 |
Flexbox网格： | 你可以在Swiper初始化的时候设定slide的显示，包括每行、每列、每组数量以及他们的间距等。 |
*请认真填写需求信息，我们会在24小时内与您取得联系。
