亿纬锦能项目总结

项目名称：亿纬锦能

项目链接：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低版本会报错

 使用方法

引入文件

<link href="css/animate.min.css">
js文件在文当最下面↓↓

 html

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></>

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

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

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 文件引入项目：

<script src="jquery.mousewheel.min.js"></script>

确保该文件与你的 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文件。

<script type="text/javascript" src="js/anime.min.js"></script>      

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]) 普通信息框

        //eg1layer.alert('只想简单的提示');    //eg2layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。//eg3layer.alert('有了回调', function(index){//do somethinglayer.close(index);});   

layer.confirm

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

        //eg1layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){//do somethinglayer.close(index);});//eg2layer.confirm('is not?', function(index){//do somethinglayer.close(index);});

layer.propmt

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

    //prompt层新定制的成员如下{formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）value: '', //初始时的值，默认空字符maxlength: 140, //可输入文本的最大长度，默认500}//例子1layer.prompt(function(value, index, elem){alert(value); //得到valuelayer.close(index);});//例子2layer.prompt({formType: 2,value: '初始值',title: '这里是title'}, function(value, index, elem){alert(value); //得到valuelayer.close(index);});

layer.open

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

        //example1:var index = layer.open({content: 'test'});//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。//example2layer.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回调体中关闭它。

       //eg1var index = layer.load();//eg2var index = layer.load(1); //换了种风格//eg3var 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

<!doctype html>
<html><head><meta charset="utf-8"><title>layer-更懂你的web弹窗解决方案</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script src="layer/layer.js"></script><script src="layer/extend/layer.ext.js"></script></head><body><script>function func1() {layer.alert('内容');}function func2() {layer.alert('内容', {icon: 1,skin: 'layer-ext-moon' });}function func3() {//询问框layer.confirm('您是如何看待前端开发？', {btn: ['重要', '奇葩'] //按钮}, function() {layer.msg('的确很重要', { icon: 1 });}, function() {layer.msg('也可以这样', {time: 2000, //2s后自动关闭btn: ['明白了', '知道了']});});}function func4() {//提示层layer.msg('玩命提示中');}function func5() {//墨绿深蓝风layer.alert('墨绿风格，点击确认看深蓝', {skin: 'layui-layer-molv' //样式类名,closeBtn: 0}, function() {layer.alert('偶吧深蓝style', {skin: 'layui-layer-lan',closeBtn: 0,shift: 4 //动画类型});});}function func6() {//捕获页layer.open({type: 1,shade: false,title: false, //不显示标题content: $('.layer_notice'), //捕获的元素cancel: function(index) {layer.close(index);this.content.show();layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 2000, icon: 6 });}});}function func7() {//页面层layer.open({type: 1,skin: 'layui-layer-rim', //加上边框area: ['420px', '240px'], //宽高content: 'html内容'});}function func8() {//自定页layer.open({type: 1,skin: 'layui-layer-demo', //样式类名closeBtn: 0, //不显示关闭按钮shift: 2,area: ['420px', '240px'], //宽高shadeClose: true, //开启遮罩关闭content: '内容'});}function func9() {//tips层layer.tips('Hi，我是tips', $("#tips"));}function func10() {//iframe层layer.open({type: 2,title: 'layer mobile页',shadeClose: true,shade: 0.8,area: ['380px', '90%'],content: 'http://m.baidu.com' //iframe的url});}function func11() {//iframe窗layer.open({type: 2,title: false,closeBtn: 0, //不显示关闭按钮shade: [0],area: ['340px', '215px'],offset: 'auto', //右下角弹出time: 2000, //2秒后自动关闭shift: 2,content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条end: function() { //此处用于演示layer.open({type: 2,title: '百度一下，你就知道',shadeClose: true,shade: false,maxmin: true, //开启最大化最小化按钮area: ['1150px', '650px'],content: 'http://www.baidu.com'});}});}function func12() {//加载层var index = layer.load(0, { shade: false }); //0代表加载的风格，支持0-2}function func13() {//loading层var index = layer.load(1, {shade: [0.1, '#fff'] //0.1透明度的白色背景});}function func14() {//小tipslayer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', $('#tips2'), {tips: [1, '#3595CC'],time: 4000});}function func15() {//prompt层layer.prompt({title: '输入任何口令，并确认',formType: 1 //prompt风格，支持0-2}, function(pass) {layer.prompt({ title: '随便写点啥，并确认', formType: 2 }, function(text) {layer.msg('演示完毕！您的口令：' + pass + ' 您最后写下了：' + text);});});}function func16() {//tab层layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1',content: '内容1'}, {title: 'TAB2',content: '内容2'}, {title: 'TAB3',content: '内容3'}]});}function openpage() {layer.config({extend: 'extend/layer.ext.js'});//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕layer.ready(function() {//官网欢迎页layer.open({type: 2,skin: 'layui-layer-lan',title: 'layer弹层组件',fix: false,shadeClose: true,maxmin: true,area: ['1000px', '500px'],content: 'https://www.baidu.com'});layer.msg('欢迎使用layer');});}</script><div class="layer_notice">hello,i'm layer!</div><button id="tips">tips</button><button id="tips2">tips2</button><button id="func1" onclick=" func1(); ">初体验</button><button id="func2" onclick=" func2(); ">皮肤</button><button id="func3" onclick=" func3(); ">询问框</button><button id="func4" onclick=" func4(); ">提示层</button><button id="func5" onclick=" func5(); ">蓝色风格</button><button id="func6" onclick=" func6(); ">捕捉页</button><button id="func7" onclick=" func7(); ">页面层</button><button id="func8" onclick=" func8(); ">自定义</button><button id="func9" onclick=" func9(); ">tips层</button><button id="func10" onclick=" func10(); ">iframe层</button><button id="func11" onclick=" func11(); ">iframe窗</button><button id="func12" onclick=" func12(); ">加载层</button><button id="func13" onclick=" func13(); ">loading层</button><button id="func14" onclick=" func14(); ">小tips</button><button id="func15" onclick=" func15(); ">prompt层</button><button id="func16" onclick=" func16(); ">tab层</button><button id="openpage" onclick=" openpage(); ">openpage</button></body>
</html>