总结 · 前端菜鸟成长记

[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> ```