整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本文介紹利用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小時內與您取得聯系。
