常用网页交互效果插件

现在前端要想写出让用户体验很好的网站页面，可不仅仅是写静态页面这么简单，这个时候页面上的交互效果就很重要了，这能让用户体验更好。而现在前端能够实现的交互效果也是越来越炫酷，也越来越复杂。但是这些特效背后的形成机制却始终简洁优雅。下面就介绍几个js插件库。

1.swiper.js（最常见的轮播插件）

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

使用方法也很简单：
引入：

 <link rel="stylesheet" href="dist/css/swiper.min.css">
<script src="dist/js/swiper.min.js"></script>
Html:
<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 class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> 
<div class="swiper-button-prev"></div> 
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> 
<div class="swiper-scrollbar"></div>
 </div>
js:
<script> var mySwiper = new Swiper ('.swiper-container', { 
direction: 'vertical', // 垂直切换选项
 loop: true, // 循环模式选项
  // 如果需要分页器 pagination: { el: '.swiper-pagination', }, 
  // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, 
  // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script>

详细查看文档：https://www.swiper.com.cn/

2.fullPage.js（基于jQuery的全屏滚动插件）

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。
fullPage.js的主要功能有：支持鼠标滚动、支持前进后退和键盘控制、多个回调函数、支持手机、平板触摸事件、支持 CSS3 动画、支持窗口缩放、窗口缩放时自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
参考网站：http://fullpage.81hu.com/

3.Jquery.js

jQuery是一个快速，小巧，功能丰富的JavaScript库。这个我就不多讲了，多看文档，多实践就完事了。

4.WOW.js（让页面更有趣，这个详细讲一下）

兼容性：

IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

01.wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。

<link rel="stylesheet" type="text/css" href="css/animate.min.css">

02.在最底部引用wow.js或者wow.min.js，然后再下面再写一行javascript代码。（无需引用jQuery）

<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
  new WOW().init();
</script>

03.配置

data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）

如果想动画效果触发多次，就用：
http://www.jeendo.com/script/wow/wow.min2.js
参考网站：http://mynameismatthieu.com/WOW/
公司网站用到这个：https://www.callmysoft.com/shipinfengehebing

5.TweenMax.js（适用于移动端和现代互联网的超高性能专业级动画插件）

TweenMax.js是GSAP的一个特殊文件，为了使用简便，它把常用的插件整合到了一起。就是说你只要加载了TweenMax.js，就可以使用四个核心工具、CSSPlugin、BezierPlugin、高级时间曲线等。
兼容性：TweenMax 的核心功能兼容各种新旧浏览器、移动设备等。

TweenMax 可以在现代浏览器中实现各种3D Transforms（缩放，倾斜，旋转，x和y轴运动），其2D动画甚至兼容IE6。
使用TweenMax 不需要添加笨重的浏览器前缀和hack。
自动解决SVG在各种浏览器的渲染问题。
使用方法，请参考：https://www.tweenmax.com.cn/

6.Toast.js（简单的信息提示插件）

这是一个简单的提示插件 适合移动端，仿安卓toast效果，兼容animate.css

参考网站：http://www.jq22.com/jquery-info14296