總結 · 前端菜鳥成長記

[TOC] # 總結 ## 一。Bootstrap框架官網： [http://getbootstrap.com/](http://getbootstrap.com/) 中文網址：[https://www.bootcss.com/](https://www.bootcss.com/) ***** BS是用來做響應式頁面的前端UI框架，它提供了柵格系統、樣式布局、API供我們直接使用。 ### 1.1**特點** 響應式布局；移動設備優先；豐富的組件；界面簡介美觀； ###1.2 **兼容性** 主流瀏覽器都支持（IE8+，firefox，chrome，Opera，Safari）； ***** ### 1.3 **步驟** **1、下載相關文件** 官網打開后下載即可，或者通過包管理工具用命令下載 **2、環境搭建相關代碼（引入主要文件** ``` ~~~ <!DOCTYPE html> <html lang="zh-CN"> ?<head> ? ?<meta charset="utf-8"> ? ?<meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ?<meta name="viewport" content="width=device-width, initial-scale=1"> ? ? ? ?<title>Bootstrap 101 Template</title> ? ? ? ? ?<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> ? ? ? ? ? ? ? ?</head> ?<body> ? ?<h1>你好，世界！</h1> ? ? ? ? ?<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> ? ? ? ?<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> ?</body> </html> ~~~ 本地簡潔版： ~~~ <!DOCTYPE html> <html lang="zh-CN"> <head> ? ?<meta charset="utf-8"> ? ?<meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ?<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> ? ?<title>Bootstrap</title> ? ?<link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> ? <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> ~~~ ``` ## 二。Animate.css 官網(特效參考)： [https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/) 源碼下載地址：[https://github.com/daneden/animate.css](https://github.com/daneden/animate.css) ***** ### 2.1**特點** animate.css 是一個來自國外的跨瀏覽器的 **CSS3 動畫庫**，它預設了多種動畫效果，例如彈跳，抖動，閃爍，淡入淡出等多種css3動畫效果可以直接調用。 ### 2.2**兼容性** animate.css底層是通過css3實現的，當然是只兼容支持 CSS3 animate 屬性的瀏覽器： IE10+、Firefox、Chrome、Opera、Safari。 ### 2.3**步驟** 使用步驟： 1 引入下載好的animate.css文件 2 給要做動畫的元素添加類名要添加兩個類名，分別是： animated(控制時間) 要添加的動畫效果類名（控制效果） ## 三. WOW.js 官網地址：[http://mynameismatthieu.com/WOW/index.html](http://mynameismatthieu.com/WOW/index.html)\> 源碼下載地址：[https://github.com/matthieua/WOW](https://github.com/matthieua/WOW) ***** ### 3.1**特點** wow.js是做網頁滾動動畫的js框架，配合animate.css使用，可以在網頁滾動的過程中**釋放animate.css動畫效果**。 ### 3.2**兼容性** 同Animate.css一樣 ### 3.3**步驟** 使用步驟： 1 引入animate.css文件和wow.js文件 2 書寫html結構在要做滾動動畫的元素身上添加**兩個類名** wow(聲明元素使用混動動畫) 動畫名稱（滾動釋放的動畫名稱） 3 初始化wow： new WOW().init() ## 四.scrollReveal.js框架 ### 4.1**特點** scrollreveal是兼容pc和移動的滾動動畫庫，可以制作頁面滾動進場動畫效果的js框架。它不依賴于其他任何框架。 ### 4.2**兼容性** 同Animate.css一樣 ### 4.3**步驟** 1、引入文件 ~~~ <script src="js/scrollReveal.js"></script> ~~~ 2、HTML （給需要添加動畫效果的標簽，添加上標簽屬性 data-scroll-reveal ） ~~~ <li data-scroll-reveal class="left"></li> <li data-scroll-reveal class="right"></li> ~~~ 3、JavaScript調用 ~~~ <script> ? new scrollReveal(); </script> ~~~ ***** **wow.js和scrollreveal.js對比** 1 都不依賴jquery； 2 WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫可以播放一次或無限次； 3 WOW.js 依賴 animate.css，而 scrollReveal.js 不依賴其他任何文件; 4 WOW.js 依賴 animate.css使用，動畫效果更多一點，可以根據具體需求選擇使用 ## 五.zepto庫/框架英文版：[http://zeptojs.com//](http://zeptojs.com//) 中文版：[https://www.html.cn/doc/zeptojs\_api/](https://www.html.cn/doc/zeptojs_api/) github : [https://github.com/madrobby/zepto](https://github.com/madrobby/zepto) ### 5.1**特點** **Zepto** 是一個**輕量級**的針對現代高級瀏覽器的 **JavaScript 庫**，它**與jquery 有著類似的api**。如果你會用 jquery，那么你也會用 zepto。 **Zepto**的**設計目的是提供 jQuery 的類似的API**，但**并不是100%覆蓋 jQuery** 。Zepto設計的目的是有一個**5-10k**的通用庫、下載并快速執行、有一個熟悉通用的API，所以你能把你主要的精力放到應用開發上。 ### 5.2**兼容性** Safari 6+ Chrome 30+ Firefox 24+ iOS 5+ Safari Android 2.3+ Browser Internet Explorer 10+ ### 5.3**zepto選擇器** 要在zepto中使用JQ寫法的選擇器，需要引入zepto的模塊selector.js，并且selector.js依賴于zepto，即selector.js要在zepto引入之后引入 ### 5.4**zepto動畫** 使用zepto動畫需要引入zepto的模塊fx.js ### 5.5**tap觸摸事件** 要添加視口標簽 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ***** zepto中的tap觸摸事件和swipe滑動事件都是基于它的touch模塊，所以使用之前也要先引入。 tap事件就是移動端的點擊事件，它在真正的移動設備上會比click快300ms。 **注意：**tap在谷歌瀏覽器上測試的時候，一定要打開移動端模擬器，直接用PC端看是沒有效果的 ### 5.5**swipe滑動事件** **注意：**使用到滑動事件需要給body添加touch-action屬性值為none ： body{touch-action: none;} 瀏覽器允許一些手勢（touch）操作在設置了此屬性的元素上，例如：對視口（viewport）平移、縮放等操作。我們把touch-action設置為none，可以禁止觸發默認的手勢操作。而PC瀏覽器默認情況下沒有對滑動進行處理，所以我們屏蔽掉它的默認不觸發效果。 ## 六。swipe框架官方網址 [https://www.swiper.com.cn/](https://www.swiper.com.cn/) ### 6。1特點 Swiper 是一款免費以及輕量級的**移動設備觸控滑塊**的js框架，主要是為IOS而設計的，同時，在Android、WP8系統以及PC端的瀏覽器也有著良好的用戶體驗。 1.輕量級，簡潔高效，可定制性非常高； 2.橫跨各種設備，兼容IOS/安卓/WP/PC端設備； 3.提供多種版本支持（可以自由選擇jQuery/zepto版或者原生js版）； ### 6。2兼容性兼容性：內部布局使用flex布局、是CSS3新增的布局方式。PC端不再考慮低版本瀏覽器。現在的版本是swiper4。 ### 6。3 步驟 #### 6。3。1 準備基本結構（**請注意：swiper嚴格要求布局和類名要使用它自己提供的，所以不能改動**） ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <link rel="stylesheet" href="swiper/swiper.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <script src="swiper/swiper.js"></script> </body> </html> ``` #### 6。3。2 添加樣式：（設置樣式，不添加的話，默認等于父容器的寬度，高度為內容高度） ``` <style> *{padding: 0; margin: 0; border: 0; list-style: none;} .swiper-container{width: 600px; height: 400px; background:pink; margin:100px auto;} </style> ``` #### 6。3。3 創建Swiper對象： ``` <script> window.onload = function(){ var swiper = new Swiper('.swiper-container'); } </script> ```