亿纬锦能项目总结

项目名称：亿纬锦能

项目链接：https://www.evebattery.com

项目概况:

此项目用到了

wow.js/slick.js/swiper-bundle.min.js/animate.js/appear.js/fullpage.js以及

slick.css/animate.css/fullpage.css/swiper-bundle.min.css/viewer.css 

本项目是一种响应 式网站, 分十三个最大宽(1919)(1760)(1680)(1560)(1440)(1366)(1280)(1200)(1199)(1024)(950)(768)(480)。

项目插件：

        slick: 

                 

        简介：

        Slick是一个流行的响应式轮播组件库，号称“最后一个轮播插件”。提供了平滑的过渡效果、自定义的外观和丰富的API选项。它易于使用，适用于各种项目，并且具有良好的文档和活跃的社区支持。

       

• 优点：拥有丰富的特性，具有响应式支持和触摸支持，以及具有强大的社区支持，方便地获取帮助和解决问题。
• 缺点：文件较大,可能会对页面加载速度产生影响；特性较多，这也意味着需要更多的配置和调整；依赖jQuery库。

   

         slick插件链接：        http://kenwheeler.github.io

                 

         swiper:

      简介：

       Swiper是一个功能强大且广泛使用的移动设备友好的轮播组件库。它具有丰富的配置选项和可自定义的样式，支持多种轮播模式、触摸滑动和过渡效果

        

• 优点：功能强大，支持多种滑动效果和交互特性，可定制性高，文档丰富。
• 缺点：较大的文件大小，对于简单的轮播可能过于复杂。

        swiper插件链接：        https://swiperjs.com

          WOW：

        简介：

wow.js一款不需要jq的动画插件

wow.js依赖animate.css，超赞的css动画库的结合，满足各种需求

兼容表

ie6、ie7等老旧浏览器不支持css3动画，所以没有效果；而wow.js也是用的querySelector方法，ie低版本会报错

 使用方法

引入文件

js文件在文当最下面↓↓

 html

 可以加入data-wow-duration（动画持续时间）和data-wow-delay（动画延迟时间）属性，如：

JavaScript

new WOW().init();

如果需要自定义配置，可如下使用：

var wow = new WOW({
   boxClass:"wow",
   animateClass:"animated",
   offset:0,
   mobile:true,
   live:true
})

 配置表：

属性/方法	类型	默认值	说明
boxClass	字符串	“wow”	需要执行动画元素的class
animateClass	字符串	“animated”	animation.css动画的class
offset	整数	0	距离可视区多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

wow.js源码 

/*! WOW - v1.0.1 - 2014-09-03
* Copyright (c) 2014 Matthieu Aussaguel; Licensed MIT */(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else{for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);this.util().addEvent(window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)}return this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],e=0,f=b.length;f>e;e++)d=b[e],g.push(function(){var a,b,e,f;for(e=d.addedNodes||[],f=[],a=0,b=e.length;b>a;a++)c=e[a],f.push(this.doSync(c));return f}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(!this.stopped){if(null==a&&(a=this.element),1!==a.nodeType)return;for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.applyStyle(b,!0),this.boxes.push(b),this.all.push(b),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=""+a.className+" "+this.config.animateClass},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.setAttribute("style","visibility: visible;"));return e},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;f=[];for(c in b)d=b[c],a[""+c]=d,f.push(function(){var b,f,g,h;for(g=this.vendors,h=[],b=0,f=g.length;f>b;b++)e=g[b],h.push(a[""+e+c.charAt(0).toUpperCase()+c.substr(1)]=d);return h}.call(this));return f},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(e=d(a),c=e.getPropertyCSSValue(b),i=this.vendors,g=0,h=i.length;h>g;g++)f=i[g],c=c||e.getPropertyCSSValue("-"+f+"-"+b);return c},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);

实现 jQuery Mousewheel 3.1.13

        简介：

在本篇文章中，我们将讨论如何实现 jQuery Mousewheel 3.1.13 插件。这个插件允许我们绑定鼠标滚轮事件，并在滚动时执行相应的操作。

        实现步骤

1.下载 jQuery Mousewheel 插件文件。可以在 [GitHub 页面]( 上找到最新版本的插件。选择最新版本的插件并下载。
2.将下载的文件解压缩，并将其中的 jquery.mousewheel.min.js 文件复制到你的项目目录中。

代码实现

步骤 1：引入 jQuery Mousewheel 插件文件

在 HTML 文件中添加以下代码，将 jquery.mousewheel.min.js 文件引入项目：

确保该文件与你的 HTML 文件位于同一目录下，或者根据实际情况修改文件路径。

 步骤 2：绑定鼠标滚轮事件

在 JavaScript 文件中，可以使用以下代码绑定鼠标滚轮事件：

$(selector).on('mousewheel', function(event) {
  // 在这里执行鼠标滚轮事件的操作
});

这里的 selector 是你想要绑定鼠标滚轮事件的元素选择器，可以是标签名、类名或 ID。

步骤 3：处理鼠标滚轮事件

在步骤 2 中的代码中，我们可以通过 event 参数来获取滚轮事件的相关信息。以下是一些常用的属性和方法：

event.deltaX：获取水平方向上的滚动距离
event.deltaY：获取垂直方向上的滚动距离
event.deltaFactor：获取滚动距离的比例因子
event.preventDefault()：阻止默认的滚轮事件

根据具体需求，我们可以在事件处理函数中使用这些属性和方法来执行相应的操作。

$(selector).on('mousewheel', function(event) {
  if (event.deltaY > 0) {
    $('body').css('background-color', 'red');
  } else {
    $('body').css('background-color', 'blue');
  }
});

以上代码中，我们通过判断 event.deltaY 属性的值，来决定页面背景色的变化

总结

通过以上步骤，我们成功实现了 jQuery Mousewheel 3.1.13 插件的使用。使用该插件，我们可以轻松地绑定鼠标滚轮事件，并对滚动进行相应的处理。

jQuery 版本viewer.js

简介

开发过程中经常会有图片列表的需求，如后台系统审核用户上传的照片等，想要实现图片放大、切换、拖动等预览效果，自己封装费时费力，而且需要考虑切换动画等细节。推荐一个相册图片预览的插件——viewer.js（插件分jquery和js两种，之前项目中使用jquery版本出现一些问题，具体情况不做说明，以下为js版本）

支持功能：

• 支持移动设备触摸事件
• 支持响应式
• 支持放大/缩小
• 支持旋转（类似微博的图片旋转）
• 支持水平/垂直翻转
• 支持图片移动
• 支持键盘
• 支持全屏幻灯片模式（可做屏保）
• 支持缩略图
• 支持标题显示
• 支持多种自定义事件

Viewer 下载地址： GitHub - fengyuanchen/viewerjs: JavaScript image viewer.

需要注意的点：1、Viewer 必须先定义：var Viewer = window.Viewer;2、url: ‘data-original’ 中的值 ‘data-original’ 指的是预览图片的地址，需要在img上设置好自定义属性，否则不会生效。当然属性值的名字可以随意设置，只有上下保持一致就好。

使用方法

// 图片预览
var viewer = new Viewer(document.getElementById('viewer'), {
    // url: 'data-original',
    button: true,
    inline: false,
    zoomable: false,
    // minZoomRatio: 0.1,
    // maxZoomRatio: 10,
    // backdrop: true,
    movable: true,
    interval: 2000,
    navbar: true,
    loading: true,
    show: function() {
        viewer.update();
    }
});

点击图片外的背景，隐藏预览图片

// 点击图片外的背景，隐藏预览图片
$("body").on("click", ".viewer-container", function(e) {
    viewer.hide()
});
$("body").on("click", ".viewer-canvas", function(e) {
    e.stopPropagation();
});
$("body").on("click", ".viewer-footer", function(e) {
    e.stopPropagation();
});
$("body").on("click", ".viewer-button", function(e) {
    e.stopPropagation();
});
$("body").on("click", ".viewer-tooltip", function(e) {
    e.stopPropagation();
});
$("body").on("click", ".viewer-player", function(e) {
    e.stopPropagation();
});

fullPage

简介
fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站

主要功能

1. 支持鼠标滚动
2. 多个回调函数
3. 支持手机、平板触摸事件
4. 支持 CSS3 动画
5. 窗口缩放时自动调整
6. 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

fullpage链接：https://cdnjs.com/libraries/fullPage.js/2.7.8

使用方法

引入文件
fullpage自己的css库文件
jQuery（版本1.6.0+）
Fullpage自己的js文件
其他扩展库（jquery.easings.min.js等）

配置项

sectionsColor： 可以为每一个section设置背景色
controlArrows: 定义是否通过箭头来控制slide幻灯片，默认为true，当我们设置为false，幻灯片两侧的箭头会消 失，在移动设备上可以通过滑动来操作幻灯片
navigation: 是否显示导航，默认为false，如果设置成true，会显示小圆点，作为导航
navigationPosition: 导航小圆点的位置，可以设置为left或者right
navigationTooltips: 导航小圆点的tooltips设置，默认是[]，注意按照顺序设置
showActiveTooltip: 是否显示当前页面的导航的tooltip信息，默认为false；

方法调用方式：

$.fn.fullpage.方法名
方法

moveSectionUp(): 向上滚动一页
moveSectionDown(): 向下滚动一页
moveTo（section，slide）: 滚动到第几页，第几个幻灯片，注意，页面是从1开始，而幻灯片是从0开始计算
silentMoveTo(section,slide) : 滚动到第几页，和moveTo一样，但是没有动画效果

回调函数

afterRender（）： 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
onLeave(index,nextIndex,direction) 在我们离开一个section时，会触发一次此回调函数，接收index，nextIndex和direction3个参数
index： 是离开的页面的序号，从 1 开始，
nextIndex：是滚动到的目标页面的序号,从 1 开始
direction：判断向上滑动还是往下滑动，值是 up 或者 down

fullpage插件简介

很方便，很轻松制作全屏页面

fullpage插件下载使用

使用步骤
引入文件
页面骨架
fullpage方法

fullpage插件常用API

配置项、方法、回调函数

jQuery Appear

简介：

jQuery Appear.js是一个轻量级的jQuery插件，它可以让任何元素在视口内出现时触发事件。当用户向下滚动页面时，该插件能够检测到任何元素何时出现，并在其出现后执行您指定的操作。这个简单却非常有用的插件可以帮助您在页面中实现各种动画效果、加载动作和视觉效果的增强。

// 使用 jQuery Appear.js 插件
$('element').appear();
// 指定出现时执行的操作
$('element').appear(function() {
// 出现时执行的代码
});
// 指定隐藏时执行的操作
$('element').appear({
disappear: true
}, function() {
// 隐藏时执行的代码
});
// 指定出现和隐藏时执行的操作
$('element').appear({
appear: true,
disappear: true
}, function() {
// 出现和隐藏时执行的代码
});

这个插件非常易于使用，只需要简单的几行代码，就能轻松地将其添加到您的项目中。它可以让您轻松地创建出现时执行的效果并自定义隐藏时的效果。使用该插件可以大大增强您的网站的动态效果，使用户体验更加流畅。如果您正在寻找一个简单而有效的方式来增强网站的视觉效果，

anime.js

简介：

anime.js是一款功能强大的Javascript动画库插件。anime.js可以和CSS3属性，SVG，DOM元素和JS对象一起工作，制作出各种高性能，平滑过渡的动画效果。

 安装

可以通过bower或npm来安装anime.js动画库插件。

npm install animejs 
bower install animejs 

使用方法

在页面中引入anime.min.js文件。

layer-v2.4弹层组件

弹出层layer的使用

Intro

layer是一款web弹层组件，致力于服务各个水平段的开发人员。layer官网：http://layer.layui.com/
layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现。

layer.msg

语法：layer.msg(content[, options][, end]) 提示框

       layer.msg('这里是msg内容');

       layer.msg('这里是msg内容',{icon:1});

       layer.msg('关闭后想做些什么', function(){
           //do something
       });

       layer.msg('同上', {
         icon: 1,
         time: 2000 //2秒关闭（如果不配置，默认是3秒）
       }, function(){
         //do something
       });

layer.alert

语法：layer.alert(content[, options][, yes]) 普通信息框

        //eg1
        layer.alert('只想简单的提示');    

        //eg2
        layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。

        //eg3
        layer.alert('有了回调', function(index){
          //do something
          layer.close(index);
        });   

layer.confirm

语法：layer.confirm(content[, options], yes[, cancel]) 询问框

        //eg1
        layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
          //do something
          layer.close(index);
        });

        //eg2
        layer.confirm('is not?', function(index){
          //do something
          layer.close(index);
        });

layer.propmt

语法：layer.prompt([options,] yes) 输入层/询问层

    //prompt层新定制的成员如下
        {
          formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
          value: '', //初始时的值，默认空字符
          maxlength: 140, //可输入文本的最大长度，默认500
        }

        //例子1
        layer.prompt(function(value, index, elem){
          alert(value); //得到value
          layer.close(index);
        });

        //例子2
        layer.prompt({
          formType: 2,
          value: '初始值',
          title: '这里是title'
        }, function(value, index, elem){
          alert(value); //得到value
          layer.close(index);
        });

layer.open

语法：layer.open(options) 原始核心方法
基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数，另外，该文档统一采用options作为基础参数的标识

        //example1:
        var index = layer.open({
          content: 'test'
        });
        //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。

        //example2
        layer.open({
            type: 1 //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            ,title: 'title here'
            ,area: ['390px', '330px']
            ,shade: 0.4
            ,content: $("#test") //支持获取DOM元素
            ,btn: ['yes', 'close'] //按钮
            ,scrollbar: false //屏蔽浏览器滚动条
            ,yes: function(index){
                //layer.msg('yes');
                layer.close(index);
                showToast();
            }
            ,btn2: function(){
                //layer.alert('aaa',{title:'msg title'});
                layer.msg('bbb');
                //layer.closeAll();
            }
        }); 

layer.load

语法：layer.load(icon, options) 加载层
icon支持传入0-2,如果是0，无需传。另外特别注意一点：load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。

       //eg1
       var index = layer.load();

       //eg2
       var index = layer.load(1); //换了种风格

       //eg3
       var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 

       //关闭
       layer.close(index);

layer.tab

语法：layer.tab(options) tab层

        layer.tab({
          area: ['600px', '300px'],
          tab: [{
            title: 'TAB1', 
            content: '内容1'
          }, {
            title: 'TAB2', 
            content: '内容2'
          }, {
            title: 'TAB3', 
            content: '内容3'
          }]
        });

demo.html

    
        
        
        
        
        
    
    
        
        
hello,i'm layer!
        tips
        tips2
        初体验
        皮肤
        询问框
        提示层
        蓝色风格
        捕捉页
        页面层
        自定义
        tips层
        iframe层
        iframe窗
        加载层
        loading层
        小tips
        prompt层
        tab层
        openpage