1.client家族
◆box.clientWidth：表示盒子的宽度加padding
◆box.clientHeight：表示盒子的高度加padding
◆box.clientTop:表示盒子上边的border大小
◆box.clientLeft:表示盒子左边的border大小
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client家族</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
border: 5px solid #000;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
console.log(box.clientWidth);//表示盒子的宽度加padding
console.log(box.clientHeight);//表示盒子的高n度加padding
console.log(box.clientTop);//表示盒子上边的border大小
console.log(box.clientLeft);//表示盒子左边的border大小
</script>
</body>
</html>2.offset与scroll和client他们的width、height的区别
◆offsetWidth和offsetHeight代表着盒子的宽高（如果盒子定义的了宽高，就以定义的宽高为主，如果盒子没有定义宽高就以盒子内容为主）加上padding+border。
◆scrollWidth和scrollHeight代表着盒子的内容的宽高（如果内容的宽高小于盒子定义的宽高，那么就以盒子定义的宽高为主，如果盒子的内容宽高大于盒子定义一个宽高，那么久以盒子的内容的宽高为主）+padding。
◆clientWidth和clientHeight代表着盒子的宽高(就算内容超过盒子，它也只获取盒子定义的宽高，如果盒子没有定义宽高，那么就获取内容的宽高)+padding。
3.offset与scroll和client他们的top、left的区别
◆offsetTop和offsetLeft代表着距离最近的父系盒子带有定位的盒子之间的距离，也就是带有定位的盒子与盒子之间的上边的距离和左边的距离，如果父系盒子中没有定位的盒子，那么就取当前盒子距离浏览器（0,0）坐标点的距离。◆scrollTop和scrollLeft代表着被卷去的距离，除了document之外其它盒子也能用，但是盒子必须要有滚动条，但是自己模拟的滚动条不行，只能使用css样式overflow:scroll;弄出来的滚动条才行。
◆clientTop和clientLeft代表着clientWidth和clientHeight不包括的上border和左border，而且只能够获取到上边的border和左边的border。
4. 使用client对象检测浏览器的宽度和高度（可视区域），也就是当你放大缩小时宽度高度就会发生变化，因为可视区域也发生了变化，检测的方式与获取scollLeft和scrollTop类似
◆无论有没有DTD，在IE9及其以上的版本的浏览器和一些主流浏览器可以使用
window.innerWidth和window.innerHeight来检测并获取当前浏览器可视区域的宽高，在IE9以下时，获取的值都是undefined。
◆当有DTD时，可以使用
document.documentElement.clientWidth和document.documentElement.clientHeight来检测并获取当前任何版本浏览器可视区域的宽高，如果没有DTD时用这个只能够正常检测IE任何版本的浏览器的可视区域的宽高。
◆当没有DTD时，可以使用
document.body.clientWidth和document.body.clientHeight在IE9以上的浏览器及各个主流浏览器检测当前浏览器的可视区域的宽高，但是有DTD时无法正常检测任何版本的浏览器的可视区域的宽高。
★所以兼容性写法和scrollTop与scrollLeft有点不一样
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}<!--<!DOCTYPE html>-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用client检测浏览器可视区域宽高</title>
</head>
<body>
<script>
/**
* 使用client对象检测浏览器的宽度和高度（可视区域），
* 也就是当你放大缩小时宽度高度就会发生变化，
* 因为可视区域也发生了变化，
* 检测的方式与获取scollLeft和scrollTop类似
* ◆无论有没有DTD，
* 在IE9及其以上的版本的浏览器和一些主流浏览器
* 可以使用window.innerWidth和window.innerHeight来检测
* 并获取当前浏览器可视区域的宽高，
* 在IE9以下时，获取的值都是undefined。
* ◆当有DTD时，可以使用document.documentElement.clientWidth
* 和document.documentElement.clientHeight来检测
* 并获取当前任何版本浏览器可视区域的宽高，
* 如果没有DTD时用这个只能够正常检测IE任何版本的浏览器的可视区域的宽高。
* ◆当没有DTD时，可以使用document.body.clientWidth和
* document.body.clientHeight在IE9以上的浏览器及各个主流浏览器检测
* 当前浏览器的可视区域的宽高，
* 但是有DTD时无法正常检测任何版本的浏览器的可视区域的宽高。
* ★所以兼容性写法和scrollTop与scrollLeft有点不一样【
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
】,
*不能够正常检测的是指高度，高度无法正常检测，
* 宽度时而能够正常检测时而不能够正常检测，
* 所以这种兼容性写法，可能在一些老的浏览器中还是会出现问题，
* 但是这个已经是最好的兼容性写法。
*/
//浏览器可视区域大小改变事件（只要浏览器可视区域有1像素的改变都会触发这个事件）
window.onresize = fn;
function fn() {
console.log(window.innerWidth + " " + window.innerHeight);
console.log(document.documentElement.clientWidth + " " + document.documentElement.clientHeight);
console.log(document.body.clientWidth + " " + document.body.clientHeight);
document.title = client().width + "px " + client().height + "px";
}
fn();//首次打开浏览器，并不一定会触发window.onresize事件，所以先执行一次
/**
* 功能：用来检测浏览器可视区域的兼容性的client对象
* @returns {{width: (Number|number), height: (Number|number)}}
*/
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
</script>
</body>
</html>5.页面适配浏览器：根据浏览器可视宽度给页面上颜色
◆window.onresize事件是可视区域大小改变事件，只要浏览器可视区域发生1px的变化，都会触发window.onresize事件，就像window.onscroll事件一样，只要滚动条中的滑块儿移动1px，都会触发window.onscroll事件，注意：首次打开浏览器并不一定会触发window.onresize事件，只有当你改变浏览器窗体大小的时候才会触发。
◆根据浏览器可视宽度给页面上颜色：在css3没有退出媒体查询之前就是使用这种方式，来让网页来根据浏览器的可视区域动态适配css样式的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据浏览器可视宽度给页面上颜色</title>
</head>
<body>
<script>
//需求：当屏幕宽度大于960时就给页面红色背景，
// 当屏幕宽度小于等于960大于640时就给页面上蓝色，
// 当屏幕宽度小于等于640时就给页面上绿色
//浏览器可视区域的大小改变的事件
window.onresize = fn;
function fn() {
if (client().width > 960) {
document.body.style.backgroundColor = "#f00";
} else if (client().width > 640) {
document.body.style.backgroundColor = "#00f";
} else {
document.body.style.backgroundColor = "#0f0";
}
document.title = client().width + "px " + client().height + "px";
}
fn();
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
</script>
</body>
</html>6.获取屏幕分辨率的高度和宽度可以window.screen.width和window.screen.height来获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用screen对象检测屏幕分辨率大小</title>
</head>
<body>
<script>
window.onresize=fn();
function fn(){
document.title=window.screen.width+"px "+window.screen.height+"px";
}
fn();
</script>
</body>
</html>7.事件冒泡
◆简单描述：事件冒泡：当一个元素上的事件被触发的时候，其所有父系容器如果定义了和这个元素被触发的事件时，那就会触发其所有父系容器的这个事件，比如鼠标点击了一个按钮，按钮设置了单击事件，按钮的父容器也设置了单击事件，那么你点击鼠标按钮时触发了单击事件，于此同时也会触发父容器的单击事件，元素开始不断的往上冒泡，一直冒泡到dom树的顶端
◆冒泡的原理：因为子容器在父容器中，你点击子容器的时候，其实也相当于点击了父容器的区域，所以就等于你先点击了子容器，然后你由点击了父容器的区域，于是乎当你给子容器和父容器都设置了单击事件时，先触发子容器的单击事件然后再触发父容器的单击事件，如果父容器的父容器也还设置了单击事件，那么就会一直往上触发单击事件。
◆事件传播阶段分三个：捕获阶段、冒泡阶段、目标阶段
◇事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标（target）为止。
◇事件冒泡阶段：事件从事件目标（target）开始往上冒泡直到页面的最上一级标签。
☆使用捕获的方式执行事件可是使用对象.addListenerEvent("事件",fn,true);来实现，使用冒泡的方式执行事件可以使用对象.on事件=fn;来实现。
◇事件目标阶段：其实很像是在捕获阶段是从外往内的，将每一个事件push进一个数组中，冒泡阶段是从数组中pop出来，事件目标阶段，将pop出的事件的方法执行，整个过程很像是一个进栈出栈然后执行。
◆冒泡顺序：
◇IE6.0：div->body->html->document
◇其它浏览器：div->body->html->document->window
☆这些事件不会冒泡也不能冒泡：blur、focus、load、unload、onmouseenter、onmouseleave
◆判断一个事件默认冒不冒泡，使用event.bubbles，如果返回值为true则这个事件冒泡，反之这个事件不冒泡。在冒泡中找到最开始的第一个触发这个事件的对象，使用event.target，谁是第一个泡泡，target就指向谁，但是在IE678中使用了srcElement，所以就需要兼容性的写法，有两种，一种直接用 || 一种是用三元运算符
var obj=event.target||event.srcElement;//返回true就是冒泡
var obj=event.target?event.target:event.srcElement;//返回true就是冒泡<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡的相关信息</title>
<style type="text/css">
#box1 {
width: 500px;
height: 500px;
background-color: #f0f;
}
#box2 {
width: 400px;
height: 400px;
background-color: #0ff;
}
#box3 {
width: 300px;
height: 300px;
background-color: #ff0;
}
#box4 {
width: 200px;
height: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4"></div>
</div>
</div>
</div>
<script>
/**
* 1.事件冒泡：
* 当一个元素上的事件被触发的时候，
* 其所有父系容器如果定义了和这个元素被触发的事件时，
* 那就会触发其所有父系容器的这个事件，
* 比如鼠标点击了一个按钮，
* 按钮设置了单击事件，
* 按钮的父容器也设置了单击事件，
* 那么你点击鼠标按钮时触发了单击事件，
* 于此同时也会触发父容器的单击事件，
* 元素开始不断的往上冒泡，
* 一直冒泡到dom树的顶端，
*
* 2.冒泡的原理：
* 因为子容器在父容器中，
* 你点击子容器的时候，
* 其实也相当于点击了父容器的区域，
* 所以就等于你先点击了子容器，
* 然后你由点击了父容器的区域，
* 于是乎当你给子容器和父容器都设置了单击事件时，
* 先触发子容器的单击事件然后再触发父容器的单击事件，
* 如果父容器的父容器也还设置了单击事件，
* 那么就会一直往上触发单击事件。
*
* 3.事件传播阶段分三个：
* 捕获阶段、冒泡阶段、目标阶段
*
* 事件捕获阶段：
* 事件从最上一级标签开始往下查找，
* 知道捕获到事件目标（target）为止。
*
* 事件冒泡阶段：
* 事件从事件目标（target）开始往上冒泡直到页面的最上一级标签。
* 使用捕获的方式执行事件可是使用对象.addListenerEvent("事件",fn,true);来实现，
* 使用冒泡的方式执行事件可以使用对象.on事件=fn;来实现。
*
*
* 4.冒泡顺序：
* IE6.0：div->body->html->document
* 其它浏览器：div->body->html->document->window
* 这些事件不会冒泡也不能冒泡：
* blur、focus、load、unload、onmouseenter、onmouseleave
*/
//事件冒泡 这种方式 事件是以冒泡的方式执行的 由内到外
box1.onclick = fn;
box2.onclick = fn;
box3.onclick = fn;
box4.onclick = fn;
document.body.onclick = fn;
//事件捕获的方式执行 由外到内
// box1.addEventListener("click", function(){
// alert("box1");
// },true);
// box2.addEventListener("click", function(){
// alert("box2");
// },true);
// box3.addEventListener("click", function(){
// alert("box3");
// },true);
// box4.addEventListener("click", function(){
// alert("box4");
// },true);
// document.body.addEventListener("click", function(){
// alert("document");
// },true);
function fn() {
alert((this.getAttributeNode("id") ? this.getAttributeNode("id").nodeValue : "document"));
}
</script>
</body>
</html>8.取消事件冒泡
◆取消事件冒泡的方式，在IE678里面使用 event.cancelBubble=ture;表示取消冒泡，但是在IE9及其以上的主流浏览器使用的是event.stopPropagation();表示停止传播，也就是停止向外冒泡，阻止冒泡的兼容性写法
obj.onmouseover=function(event){
//获取兼容性的事件对象
event=event||window.event;
if(event&&event.stopPropagation){
event.stopPropagation();//停止冒泡
}else{
event.cancelBubble=true;//取消冒泡
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取消事件冒泡</title>
<style type="text/css">
#box1 {
width: 500px;
height: 500px;
background-color: #f0f;
}
#box2 {
width: 400px;
height: 400px;
background-color: #0ff;
}
#box3 {
width: 300px;
height: 300px;
background-color: #ff0;
}
#box4 {
width: 200px;
height: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4"></div>
</div>
</div>
</div>
<script>
/**
* 取消事件冒泡的方式，
* 在IE678里面使用event.cancelBubble=ture;表示取消冒泡，
* 但是在IE9及其以上的主流浏览器使用的是
* event.stopPropagation();
* 表示停止传播，
* 也就是停止向外冒泡，
*/
//需求：阻止box1和box4的事件冒泡
//思路：在IE678 里使用事件对象的 event.cancelBubble = true;//取消冒泡
// 在其它浏览器里使用事件对象的 event.stopPropagation();//停止传播
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件源
//3.书写事件驱动程序
box1.onclick = function (event) {
//获取兼容性的事件对象
event = event || window.event;
//判断是否不是IE678
if (event && event.stopPropagation) {
event.stopPropagation();//停止传播
} else {
event.cancelBubble = true;//取消冒泡
}
alert("box1这里开始停止冒泡");
}
box2.onclick = function (event) {
//获取兼容性的事件对象
event = event || window.event;
alert("box2冒泡吗？答案是：" + event.bubbles);
}
box3.onclick = function (event) {
//获取兼容性的事件对象
event = event || window.event;
alert("box3冒泡吗？答案是：" + event.bubbles);
}
box4.onclick = function () {
//获取兼容性的事件对象
event = event || window.event;
//判断是否不是IE678
if (event && event.stopPropagation) {
event.stopPropagation();//停止传播
} else {
event.cancelBubble = true;//取消冒泡
}
alert("box4一开始就停止冒泡");
}
document.body.onclick = function () {
alert("document");
}
</script>
</body>
</html>9.事件冒泡灵活运用之事件委托
◆利用事件冒泡和event.target可以减少很多不必要的事件的定义，通过判断事件源的第一个对象，就知道是谁最开始触发了这个事件，那么就可以在最大的那个父容器的事件里面做最直接的事情了，页面元素的事件其实一直都存在，只不过是内部的事件驱动程序没有写罢了，所以就算你没有给页面元素手动设置事件，也能够通过event.target来找到触发事件的第一个事件源对象，
使用事件冒泡和事件源来显示隐藏模态框：模态框效果，这个很常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用事件冒泡和事件源来显示隐藏模态框</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.mask {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
overflow: hidden;
display: none;
position: fixed;
left: 0;
top: 0;
}
.login {
width: 450px;
height: 380px;
background-color: #ffc;
margin: 200px auto;
cursor: pointer;
}
</style>
</head>
<body>
<a href="#">登陆</a>
<a href="#">注册</a>
<div class="mask">
<div class="login" id="login"></div>
</div>
<script>
//需求：当点击登陆链接时，弹出模态框，
// 模态框弹出之后，点击登陆部分之外的部分就隐藏模态框
//思路：设置登陆链接点击事件，然后设置文档对象的点击事件
// 点击登陆连接之后，显示模态框，由于事件冒泡，
// 所以也会触发文档对象的单击事件，
// 判断第一个事件源是不是login，
// 如果是login就不隐藏，反之就隐藏，
// 但是登陆链接的点击事件要取消冒泡，
// 不然就会导致点击登陆链接之后也会隐藏模态框
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
var a = document.getElementsByTagName("a")[0];
var mask = document.getElementsByTagName("div")[0];
//2.绑定事件
a.onclick = function (event) {
//3.书写事件驱动程序
//获取兼容性的事件对象
event = event || window.event;
//取消默认的冒泡
if(event&&event.stopPropagation){
event.stopPropagation();//停止传播 停止冒泡
}else {
event.cancelBubble=true;//取消冒泡 兼容IE678
}
show(mask);
}
/**
* 利用事件冒泡和event.target可以减少很多不必要的事件的定义，
* 通过判断事件源的第一个对象，
* 就知道是谁最开始触发了这个事件，
* 那么就可以在最大的那个父容器的事件里面做最直接的事情了，
* 页面元素的事件其实一直都存在，
* 只不过是内部的事件驱动程序没有写罢了，
* 所以就算你没有给页面元素设置事件，
* 也能够通过event.target来找到触发事件的第一个事件源对象。
*/
document.body.onclick = function (event) {
//3.书写事件驱动程序
//获取兼容性的事件对象
event = event || window.event;
//获取兼容性的第一个事件源对象
var obj = event.target || event.srcElement;
//判断这个对象是否不是login对象
if (obj.id !== "login") { //通过这种方式 减少了很多事件的定义
hide(mask);
}
console.log(obj);
}
function show(element) {
element.style.display = "block";
}
function hide(element) {
element.style.display = "none";
}
</script>
</body>
</html>◆js中的【事件委托】是通过事件冒泡来实现的，通过设置父容器的事件，当调用自己的事件时，在父容器那里去执行，从而，当子容器过多时减少了事件过多的定义，只需要定义一个父容器的事件即可，但是在父容器的事件中需要过滤，因为并不是所有的子元素都需要定义事件，所以可能需要在父容器中设置判断，判断当前触发的第一个事件源对象是否符合要求，如果符合的话就执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过事件冒泡来进行事件委托</title>
<style type="text/css">
li {
height: 30px;
line-height: 30px;
background-color: #f00;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<button>来1个移民Li</button>
<ul>
<li>我是土著li</li>
<li>我是土著li</li>
<li>我是土著li</li>
<li>我是土著li</li>
<li>我是土著li</li>
</ul>
<script>
var button = document.getElementsByTagName("button")[0];
var ul = document.getElementsByTagName("ul")[0];
//来五个移民li
button.onclick = function () {
var li = document.createElement("li");
li.innerHTML="我是新来的移民li";
ul.appendChild(li);
}
// //普通的绑定事件
// for (var i = 0; i < ul.children.length; i++) {
// ul.children[i].onclick = function () {
// alert(this.innerHTML);
// }
// }
//事件委托的绑定方式：
//上面的普通绑定事件的不好的地方在于
//由于js代码是从上往下执行的，
// 事件绑定的这段代码执行完毕之后就不会再继续执行了
//所以会导致后来新增加进去的 li 没有绑定那个事件
//通过事件冒泡的方式进行事件委托,
//可以实时的给新增加进来的li设置事件
//其实并不是给li绑定事件，
// 而是间接的给li设置了事件,
// 相当于把li的事件委托给了ul
ul.onclick = function (event) {
//获取兼容性的事件对象
event = event || window.event;
//获取兼容性的第一个事件源对象
var obj = event.target || event.srcElement;
if(obj.tagName.toLocaleLowerCase()==="li"){
alert(obj.innerHTML);
}
}
</script>
</body>
</html>10.获取行内式、内嵌式、外链式的CSS样式的各种方式
◆获取对象的属性值的两种方式，第一种是对象.属性名，第二种是对象["属性名"]，第二种非常的灵活，第一种比较准确。
◆获取行内式：对象.style.属性名和对象.style["属性名"]，这种方式只能取行内的样式，这个style也是一个对象，它是页面标签中的style属性里的字符串转换成了json对象，如果你想获取页面标签中style属性的字符串，可以使用style.cssText来获取纯字符串。
◆获取内嵌式和外链式：对象.currentStyle.属性名和对象.currentStyle["属性名"]只能够在IE浏览器中使用，window.getComputedStyle(对象,伪元素对象).属性名和window.getComputedStyle(对象,伪元素对象)["属性名"]可以在IE9及以上的等一些主流浏览器中使用，如果没有伪元素对象可以给这个方法的参数赋值null，获取行内式的方式只能够获取行内式，但是获取内嵌式与外链式的方式其实还可以获取行内式的样式。
◆获取内嵌式与外链式的兼容性写法
if(window.getComputedStyle){
return window.getComputedStyle(element,null)["background-color"];
}else {
return element.currentStyle["background-color"];
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取外链式和内嵌式的css样式</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background-color: #901;
position: fixed;
/*left: 200px;*/
top: 200px;
}
</style>
</head>
<body>
<div id="box" style="left:250px;background-color: #901;"></div>
<script>
/**
* 获取行内式、内嵌式、外链式的css样式的方式：
*
* 获取行内式：
* 对象.style.属性名和对象.style["属性名"]，
* 这种方式只能取行内的样式，
* 这个style也是一个对象，
* 它是页面标签中的style属性里的字符串转换成了json对象，
* 如果你想获取页面标签中style属性的字符串，
* 可以使用style.cssText来获取纯字符串。
*
* 获取内嵌式和外链式：
* 对象.currentStyle.属性名和对象.currentStyle["属性名"]，
* 只能够在IE浏览器中使用，
* window.getComputedStyle(对象,伪元素对象).属性名
* 和window.getComputedStyle(对象,伪元素对象)["属性名"]
* 可以在IE9及以上的等一些主流浏览器中使用，
* 如果没有伪元素对象可以给这个方法的参数赋值null，
* 获取行内式的方式只能够获取行内式，
* 但是获取内嵌式与外链式的方式
* ★其实还可以获取行内式的样式。
*/
console.log(box.style.left);
// console.log(box.currentStyle.left);
console.log(window.getComputedStyle(box, null).left);
console.log(box.style.backgroundColor);//全部都可以获取
console.log(box.style["backgroundColor"]);//全部都可以获取
console.log(box.style["background-color"]);//全部都可以获取
// console.log(box.currentStyle.backgroundColor);//全部都可以获取
console.log("1" + window.getComputedStyle(box, null)["backgroundColor"]);//全部都可以获取
console.log("2" + window.getComputedStyle(box, null)["background-color"]);//全部都可以获取
console.log("3" + window.getComputedStyle(box, null).backgroundColor);//全部都可以获取
console.log(box.style);
/**
* 功能：获取兼容性的css样式对象
* 其它：可以获取内嵌式、外链式、行内式的样式对象
* @param element
* @returns {*}
*/
function getStyle(element) {
return element.currentStyle ?
element.currentStyle :
window.getComputedStyle(element, null);
}
</script>
</body>
</html>◆无论是行内式的样式还是内嵌式外链式的样式，使用[]方括号的方式获取样式时，既可以使用驼峰命名法也可以使用-命名法，如box.style.backgroundColor即可以写成box.style["backgroundColor"]也可以写成box.style["background-color"]这样，都行，但是如果使用对象.的方式只能够使用驼峰命名法。
◆通过元素和属性名获取样式的属性值：内嵌式、外链式的CSS样式的兼容性写法
/**
* 功能：获取该元素样式属性的属性值
* @param element
* @param attribute
* @returns {*}
*/
function getStyle(element, attribute) {
return element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute];
}但是，当页面使用ctrl+鼠标滚轮进行发大缩小时，会造成获取getStyle(element, key)获取的值有小数的。
11.匀速动画计算步长与缓速动画计算步长
◆匀速动画计算步长
element.speed =element.target > element.leader ? 10 : -10;◆缓速动画计算步长
//获取步长
element.speed = (element.target- element.leader) / 10 || 0; //二次计算步长
element.speed = element.speed > 0 ?Math.ceil(element.speed) : Math.floor(element.speed);12.封装缓速动画框架
◆简单版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装的兼容性样式对象制作缓速动画框架（简单版）</title>
<style type="text/css">
.box {
height: 200px;
background-color: #eee;
position: relative;
padding-left: 100px;
padding-top: 20px;
}
#box1 {
width: 80px;
height: 80px;
background-color: #701;
position: absolute;
top: 60px;
left: 100px;
/*box-shadow: #a01 0px 0px 80px 10px;*/
}
</style>
</head>
<body>
<div class="box">
<button>移动到400</button>
<button>移动到900</button>
<div id="box1"></div>
</div>
<script>
//需求：当点击按钮时，缓速移动
//要求：必须使用封装的兼容性对象的方法 方法参数1：元素对象 方法参数2:要获取的属性名（单个属性）
//思路：封装缓速移动的框架，多添加一个参数，attribute
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
var box = document.getElementsByTagName("div")[0];
var btn = box.children[0];
var btn2 = box.children[1];
var box1 = box.children[2];
//2.绑定事件
btn.onclick = function () {
//3.书写事件驱动程序
animate(box1, "left", 400);
}
btn2.onclick = function () {
//3.书写事件驱动程序
animate(box1, "left", 900);
}
/**
* 功能：获取该元素样式属性的属性值
* @param element
* @param attribute
* @returns {*}
*/
function getStyle(element, attribute) {
return element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute];
}
/**
* 功能：缓速改变元素的属性（类似缓速移动或者改变大小的动画效果）
* @param element
* @param attribute
* @param target
*/
function animate(element, attribute, target) {
//使用定时器之前先清除定时器
clearInterval(element.timer);
//使用定时器
element.timer = setInterval(function () {
// 获取当前的位置
element.leader = parseInt(getStyle(element, attribute)) || 0;
//获取步长
element.speed = (target - element.leader) / 10 || 0;
//二次计算步长
element.speed = element.speed > 0 ?
Math.ceil(element.speed) : Math.floor(element.speed);
//重新设置当前位置
element.leader = element.leader + element.speed;
//判断是否距离当前位置只有一步之遥了
if (Math.abs(target - element.leader) <= Math.abs(element.speed)) {
//直接到达指定目标位置
element.style[attribute] = target + \'px\';
clearInterval(element.timer);
return;
}
//进行移动
element.style[attribute] = element.leader + "px";
}, 30);
}
</script>
</body>
</html>◆中级版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装的兼容性样式对象制作缓速动画框架（中级版）</title>
<style type="text/css">
.box {
height: 200px;
background-color: #eee;
position: relative;
padding-left: 100px;
padding-top: 20px;
}
#box1 {
width: 80px;
height: 80px;
background-color: #701;
position: absolute;
top: 60px;
left: 100px;
/*box-shadow: #a01 0px 0px 80px 10px;*/
}
</style>
</head>
<body>
<div class="box">
<button>开始动画</button>
<div id="box1"></div>
</div>
<script>
//需求：当点击按钮时，缓速移动
//要求：必须使用封装的兼容性对象的方法 方法参数1：元素对象 方法参数2:参数对象（多个属性）
//思路：封装缓速移动的框架，多添加一个参数，attribute
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
var box = document.getElementsByTagName("div")[0];
var btn = box.children[0];
var box1 = box.children[1];
//2.绑定事件
btn.onclick = function () {
//3.书写事件驱动程序
var json = {width: 200.3, height: 200.3, left: 400.3, height: 400.3};
animate(box1, json);
}
/**
* 功能：获取该元素样式属性的属性值
* @param element
* @param attribute
* @returns {*}
*/
function getStyle(element, attribute) {
return element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute];
}
//缓速改变元素的属性（类似缓速移动或者改变大小的动画效果）
function animate(element, json) {
//使用定时器之前先清除定时器
clearInterval(element.timer);
//使用定时器
element.timer = setInterval(function () {
//开闭思想
var bool = true;
//遍历json对象 完成每一个属性的缓速动画效果
for (var key in json) {
//key作为属性名 json[key]作为目标属性值
//bug：当页面使用ctrl+鼠标滚轮进行发大缩小时，
// 会造成获取getStyle(element, key)获取的值有小数，
//或者你传递进来的数值带有小数，那么就可能会造成死循环
//因为parseInt是向下取整的，所以不能那样子，只能够向上取整
var str = getStyle(element, key)
var index = str.indexOf("px");
str = str.slice(0, index);
// 获取当前的位置
element.leader = Math.ceil(str) || 0;
//获取步长
element.speed = (json[key] - element.leader) / 10 || 0;
//二次计算步长
element.speed = element.speed > 0 ?
Math.ceil(element.speed) : Math.floor(element.speed);
//只要有一个位置不是指距离一步之遥
if (Math.abs(json[key] - element.leader) <= Math.abs(element.speed)) {
element.style[key] = json[key] + \'px\';
continue;
} else {
bool = false;
}
//进行移动
element.style[key] = (element.leader + element.speed) + "px";
}
console.log(1);
if (bool) {
// //直接到达指定目标位置
clearInterval(element.timer);
}
}, 30);
}
</script>
</body>
</html>◆高级版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装的兼容性样式对象制作缓速动画框架（高级版）</title>
<style type="text/css">
.box {
height: 200px;
background-color: #eee;
position: relative;
padding-left: 100px;
padding-top: 20px;
}
#box1 {
width: 80px;
height: 80px;
background-color: #701;
position: absolute;
top: 60px;
left: 100px;
/*box-shadow: #a01 0px 0px 80px 10px;*/
}
</style>
</head>
<body>
<div class="box">
<button>走你，再回来</button>
<div id="box1" style="border-radius: 0px 5px 6px 7px;"></div>
</div>
<script>
//需求：当点击按钮时，缓速移动
//要求：必须使用封装的兼容性对象的方法 方法参数1：元素对象 方法参数2:参数对象（多个属性）
//新增要求：增加回调用函数，当动画结束后执行回调用函数
//思路：封装缓速移动的框架，多添加一个参数，attribute
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
var box = document.getElementsByTagName("div")[0];
var btn = box.children[0];
var box1 = box.children[1];
//2.绑定事件
btn.onclick = function () {
//3.书写事件驱动程序
var json ={"border-radius":50} //{width: 200.3, height: 200.3, left: 400.3, top: 400.3};
var json2 = {width: 80.3, height: 80.3, left: 100.5, top: 60.6};
//执行完动画后再执行回调函数
animate(box1, json, function () {
// animate(box1, json2, null);
});
}
/**
* 功能：获取该元素样式属性的属性值
* @param element
* @param attribute
* @returns {*}
*/
// function getStyle(element, attribute) {
// return element.currentStyle
// ?
// element.currentStyle[attribute]
// :
// window.getComputedStyle(element, null)[attribute];
// }
function getStyle(element, attribute) {
return (element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute])
||
element.style[attribute];
}
//缓速改变元素的属性（类似缓速移动或者改变大小的动画效果）
function animate(element, json, fn) {
//使用定时器之前先清除定时器
clearInterval(element.timer);
//使用定时器
element.timer = setInterval(function () {
//开闭思想
var bool = true;
//遍历json对象 完成每一个属性的缓速动画效果
for (var key in json) {
//key作为属性名 json[key]作为目标属性值
//bug：当页面使用ctrl+鼠标滚轮进行发大缩小时，
// 会造成获取getStyle(element, key)获取的值有小数，
//或者你传递进来的数值带有小数，那么就可能会造成死循环
//因为parseInt是向下取整的，所以不能那样子，只能够向上取整
var str = getStyle(element, key)
var index = str.indexOf("px");
str = str.slice(0, index);
// 获取当前的位置
element.leader = Math.ceil(str) || 0;
//获取步长
element.speed = (json[key] - element.leader) / 10 || 0;
//二次计算步长
element.speed = element.speed > 0 ?
Math.ceil(element.speed) : Math.floor(element.speed);
//只要有一个位置不是指距离一步之遥 这么做事考虑到了小数的情况
if (Math.abs(json[key] - element.leader) <= Math.abs(element.speed)) {
element.style[key] = json[key] + \'px\';
continue;
} else {
bool = false;
}
//进行移动
element.style[key] = (element.leader + element.speed) + "px";
}
console.log(1);
if (bool) {
// //直接到达指定目标位置
clearInterval(element.timer);
// //执行完毕后 执行回掉函数
if (fn) {
fn();
}
}
}, 18);
}
</script>
</body>
</html>13.使用封装的缓速框架来DIY动画效果：手风琴效果+360开机动画
◆使用dom简单封装的jquery：
/* 功能：显示元素
* @param element
*/
function show(element) {
element.style.display = "block";
}
/**
* 功能：隐藏元素
* @param element
*/
function hide(element) {
element.style.display = "none";
}
/**
* 功能：最强的缓速移动方法
* 参数：传递元素对象、传递样式参数对象、传递回掉函数
* @param element
* @param json
* @param fn
*/
function animate(element, json, fn) {
//使用定时器之前先清除定时器
clearInterval(element.timer);
//使用定时器
element.timer = setInterval(function () {
//开闭思想
var bool = true;
//遍历json对象 完成每一个属性的缓速动画效果
for (var key in json) {
//key作为属性名 json[key]作为目标属性值
//bug：当页面使用ctrl+鼠标滚轮进行发大缩小时，
// 会造成获取getStyle(element, key)获取的值有小数，
//或者你传递进来的数值带有小数，那么就可能会造成死循环
//因为parseInt是向下取整的，所以不能那样子，只能够向上取整
//var str = getStyle(element, key)
//var index = str.indexOf("px");
//str = str.slice(0, index);
//element.str= getStyle(element, key).slice(0,getStyle(element, key).indexOf("px"))
// 获取当前的位置
element.leader = Math.ceil(getStyle(element, key).replace("px", "")) || 0;
//获取步长
element.speed = (json[key] - element.leader) / 10 || 0;
//二次计算步长
element.speed = element.speed > 0 ?
Math.ceil(element.speed) : Math.floor(element.speed);
////匀速的步长计算
//element.speed = json[key] > element.leader ? 10 : -10;
//只要有一个位置不是指距离一步之遥 这么做事考虑到了小数的情况
if (Math.abs(json[key] - element.leader) <= Math.abs(element.speed)) {
element.style[key] = json[key] + \'px\';
continue;
} else {
bool = false;
}
//进行移动
element.style[key] = (element.leader + element.speed) + "px";
}
console.log(1)
if (bool) {
// //直接到达指定目标位置
clearInterval(element.timer);
// //执行完毕后 执行回掉函数
if (fn) {
fn();
}
}
}, 18);
}
/**
* 功能：垂直方向上缓度滚动到某个位置
* 参数说明：element元素对象 target指定位置
* @param element
* @param target
*/
function scrollAnimateY(element, target) {
//使用定时器之前先清除定时器
clearInterval(element.timer);
//设置定时器
element.timer = setInterval(function () {
//计算步长
element.speed = (target - element.leader) / 10;
//二次计算步长 防止 水永远取不尽 定时器永远不停
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//距离是否只剩一步之遥
if (Math.abs(target - element.leader) <= Math.abs(element.speed)) {
window.scrollTo(0, target);
console.log(element.leader);
clearInterval(element.timer);
return;
}
//设置移动的动画
window.scrollTo(0, element.leader + element.speed);
}, 30);
}
/**
* 功能：水平方向的元素缓速移动的动画
* @param element
* @param target
*/
function animateX(element, target) {
//绑定计时器之前先清除定时器
clearInterval(element.timer);
element.timer = setInterval(function () {
//注意：this.offsetLeft最终获取的是number类型的值，并且它还会对小数进行四舍五入，
//如果this.style.left中有小数，并且还低于0.5，那么就会导致offsetLeft每次获取到的值，
//都是一样，然后就会造成 盒子不懂，定时器不停的现象发生，所以缓速动画时要记得给步长取整
// 如果步长>0就向上取整，避免步长小于0.5时出现bug,
// 如果步长<0，就向下取整，避免步长下雨-0.5时出现bug。
//每次移动的步长
element.spend = (target - element.offsetLeft) / 10
//对步长进行取整，避免offsetLeft底层的四舍五入的影响
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//目标位置减去当前位置的绝对值 如果小于步长的绝对值 那么就说明也就一步之遥了，
// 那么直接移动到指定的位置清除计时器算了。
if (Math.abs(target - element.offsetLeft) <= Math.abs(element.spend)) {
element.style.left = target + "px";
clearInterval(element.timer);
return;
}
//重新设置距离左边的位置
element.style.left = element.offsetLeft + element.spend + "px";
console.log(element.style.left)
}, 30);
}
/**
* 功能：垂直方向的元素缓速移动的动画
* @param element
* @param target
*/
function animateY(element, target) {
//绑定计时器之前先清除定时器
clearInterval(element.timer);
element.timer = setInterval(function () {
//注意：this.offsetTop最终获取的是number类型的值，并且它还会对小数进行四舍五入，
//如果this.style.Top中有小数，并且还低于0.5，那么就会导致offsetTop每次获取到的值，
//都是一样，然后就会造成 盒子不懂，定时器不停的现象发生，所以缓速动画时要记得给步长取整
// 如果步长>0就向上取整，避免步长小于0.5时出现bug,
// 如果步长<0，就向下取整，避免步长下雨-0.5时出现bug。
//每次移动的步长
element.spend = (target - element.offsetTop) / 10
//对步长进行取整，避免offsetTop底层的四舍五入的影响
element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);
//目标位置减去当前位置的绝对值 如果小于步长的绝对值 那么就说明也就一步之遥了，
// 那么直接移动到指定的位置清除计时器算了。
if (Math.abs(target - element.offsetTop) <= Math.abs(element.spend)) {
element.style.top = target + "px";
clearInterval(element.timer);
return;
}
//重新设置距离左边的位置
element.style.top = element.offsetTop + element.spend + "px";
console.log(element.style.top)
}, 10);
}
/**
* 功能：获取兼容性的css样式对象的样式属性值
* 其它：可以获取内嵌式、外链式、行内式的样式对象的样式属性值
* @param element
* @returns {*}
*/
//function getStyle(element, attribute) {
// return element.currentStyle ?
// element.currentStyle[attribute] :
// window.getComputedStyle(element, null)[attribute];
//}
function getStyle(element, attribute) {
return (element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute])
||
element.style[attribute];
}
/**
* 功能：用来检测浏览器可视区域的兼容性的client对象
* @returns {{width: (Number|number), height: (Number|number)}}
*/
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
/**
* 功能：获取scroll对象
* @returns {*}
*/
function scroll() {
/*
*注意事项：
*1.无论有没有声明DTD 在IE9及以上的所有浏览器都支持window.pageXOffset和window.pageYOffset
* 但是在IE9以下不支持，并且会返回undefined。
*2.在没有声明DTD时 在IE9以上的所有浏览器都支持document.body.scrollLeft和document.body.scrollTop
* 在声明了DTD时 所有浏览器都不支持，并且会返回0
*3.在声明了DTD时 所有浏览器都支持document.documentElement.scrollLeft和document.documentElement.scrollTop
* 无论有没有声明DTD IE浏览器都支持,没有声明DTD 其它除了IE浏览器外都不支持，并且会返回0。
* */
//判断是否不为undefined
if (window.pageXOffset !== "undefined" || window.pageYOffset !== "undefined") {
//返回一个关于scroll的对象回去
return {scollLeft: window.pageXOffset, scollTop: window.pageYOffset};
}
else if (document.compatMode === "BackCompa") {//是否没有声明DTD（<!DOCTYPE html>或者其它<html>标签之上的标记）
//判断是否是IE浏览器
if (document.documentElement.scrollLeft || document.documentElement.scrollTop) {
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
else {//如果不是IE浏览器
return {scollLeft: document.body.scrollLeft, scollTop: document.body.scrollTop};
}
}
else {//如果声明了DTD
return {scollLeft: document.documentElement.scrollLeft, scollTop: document.documentElement.scrollTop};
}
// //精简版封装只需要返回 这个就是上面判断的精简 效果一样
// return {
// scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
// scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
// }
}
/**
* 功能：根据 传递参数 返回相应的对象
* 说明：参数为：#id选择器、.class选择器、tag普通选择器其中一种
* @param str
* @returns {*}
*/
function $(str) {
//获取头部选择符
var head = str.charAt(0);
//去除id选择器与class选择器标识后的内容
var body = str.slice(1);
if (head === "#") { //id
return document.getElementById(body);
} else if (head === ".") {//class
return document.getElementsByClassName(body);
} else {//tag
return document.getElementsByTagName(str);
}
}
//******************获取子元素节点*********开始********//
/**
* 功能：获取第一个子元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getfirstchild(ele) {
return ele.firstElementChild || ele.firstChild;
}
/**
* 功能：获取最后一个子元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getlastchild(ele) {
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：获取对应索引值的子元素节点
* @param ele
* @param index
* @returns {*|HTMLElement}
*/
function getchildofindex(ele, index) {
return ele.children[index];
}
/**
* 功能：获取所有的子元素节点
* @param ele
* @returns {Array}
*/
function getallchild(ele) {
var newArr = [];
var oldArr = ele.children;//childNodes;
for (var i = 0; i < oldArr.length; i++) {
if (oldArr[i].nodeType === 1) {
newArr.push(oldArr[i]);
}
}
return newArr;
}
//******************获取子元素节点*********结束********//
//******************获取兄弟元素节点*********开始********//
/**
* 功能：获取上一个兄弟元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getpresibling(ele) {
var pre = ele.previousElementSibling || ele.previousSibling;
return pre;
}
/**
* 功能：获取下一个兄弟元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getnextsibling(ele) {
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：获取对应索引值的兄弟元素节点
* @param ele
* @param index
* @returns {*|HTMLElement}
*/
function getsiblingofindex(ele, index) {
return ele.parentNode.children[index];
}
/**
* 功能：获取所有的兄弟元素节点（不包括自己）
* @param ele
* @returns {Array}
*/
function getallsibling(ele) {
var newArr = [];
var oldArr = ele.parentNode.children;
for (var i = 0; i < oldArr.length; i++) {
if (oldArr[i] != ele) {
newArr.push(oldArr[i]);
//newArr[newArr.length]=oldArr[i];
}
}
return newArr;
}
//******************获取兄弟元素节点*********结束********//◆手风琴效果：图片大小为1226*640
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用封装的样式缓速框架制作手风琴</title>
<style type="text/css">
body, ul, li, div {
padding: 0;
margin: 0;
}
.box {
width: 1150px;
height: 400px;
border: 1px solid #b01;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 120%;
}
li {
width: 240px;
height: 400px;
float: left;
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="13.自己封装的query1.0.0.3.js"></script>
<script>
//需求：动态给每一个li设置背景图片，当移入到一张图片上时当前图片变宽，其它图片就变窄
//思路：循环给每一个li设置背景，循环遍历li，当移入一个li时，就循环变窄全部，然后再变宽自己
//注意点：由于是缓速动画，所以可能会造成抖动的现象
//步骤：
//1.获取事件源及相关对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关对象
var box = document.getElementsByTagName("div")[0];
var ul = box.children[0];
var liArr = ul.children;
for (var i = 0; i < liArr.length; i++) {
liArr[i].style.background = "url(images/" + (i + 1) + ".jpg) no-repeat scroll left top";
}
//2.绑定事件 使用事件委托的方式
ul.onmouseover = function (event) {
//3.书写事件驱动程序
//获取兼容性的事件对象
event = event || window.event;
//获取兼容性的 事件源对象
var obj = event.target ? event.target : event.srcElement;
if (obj.tagName.toLowerCase() === "li") {
for (var i = this.children.length - 1; i >= 0; i--) {
if (obj !== this.children[i]) {
animate(this.children[i], {width: 100});//先把别的变窄
// this.children[i].style.width = "100px";
} else {
animate(obj, {width: 800});//把移入的li变宽
// obj.style.width = "800px";
}
}
}
console.log(this);
}
ul.onmouseout = function () {
for (var i = 0; i < this.children.length; i++) {
animate(this.children[i], {width: 240});//先把所有恢复原样
}
}
</script>
</body>
</html>◆360开机动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟360开机动画缓速退出</title>
<style>
.box {
width: 322px;
position: fixed;
bottom: 0;
right: 0;
}
span {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<span id="guanbi"></span>
<div class="hd" id="t">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoGBgcHBwoICAoOCggKDhENCgoNERMPDxAPDxMWERISEhIRFhMWFxgXFhMdHR8fHR0pKCgoKSsrKysrKysrKyv/2wBDAQsKCg8ODxcRERcZFBIUGR8dHR0dHyMfHx8fHyMmIiAgICAiJiQlIyMjJSQoKCYmKCgrKysrKysrKysrKysrKyv/wAARCAD0AUIDAREAAhEBAxEB/8QAGwABAAIDAQEAAAAAAAAAAAAAAAMEAQIFBgf/xABOEAACAQMCAwQDCgsGBQMFAQABAgMABBEFEhMhMQYiQVEUMmEVI1RxdIGRk7PRFiQzNUJScnOhsvAlNFOSsdIHYsHh8UOiwjZEVWOCg//EABoBAQADAQEBAAAAAAAAAAAAAAABAgMEBQb/xAAzEQEAAQMDAgUEAgIBAwUAAAAAAQIDERIhMQRREzJBYXEFFCJSM0IVI4FDodGRscHh8P/aAAwDAQACEQMRAD8At2X90t/3Uf8AIK+V+p5i9U8ujKX/AFrl0642WiJYH9Y+nw9lRTG+MSfl/wDR4/1/pUeHMxMwnw5n/wAH9D/zVqbe2e5HwyoZmCrzYnAA6knoPjqNNWcb7ojPZimic5xKd2VVm5KCTjPLyAJJ/hUU/lsijdj+FKaJmZiN0wzsO0tg7RgFvAZzj6cVOJiN4xgmmRVZmCKMuTyUdSfZU6Kqt4jYi3Laa3mgO2WNoyeeGUioqoqjaeTGfRpVdkaYKbGmCowfiUx8n4lMfJmkpj5M0lMfIUx8mCmE4gpgxBTdGIKGIKncxBUboP686nCSiCmE7lRg3KnAUwYKjHyblMfJuUx8owUwYKnedoTGUrWk6QJcMhEMhIV+oyMgj2cx41p4NdPG62mZLi0ntWCzoY2YBgpxnB88dPnpVaqt+YmlFVIqjMY7q4cC/f8AHJ/3j/zGvvrWrRT8Q82Y3dmx/uVt+5j/AJBXx31L+WqHoULtpNLAWZJHiTpLJH1APTxXx9tc/T+b1aUuvPIsRurra5kJhG+JgkgSRd2WO1sbj1/hyr0ZpiJzjNXs1x7SykRt54oUdnWS6Zbg9S64Q7ZPPGTVKbcRTH61ZyY+VeB3SxkEWoCNeJHtwZsrnid3kp5n2ZrOzTHh4mfVaPlOoRu0I4twkwExA3GTMXfyqgHZ4nAxkePQVrGJv8wf3xmEE0v4mYo3JgNrvCLu25N3+qScEDkevxmoufx7Lf1VrOERsp58V4LhivkhifZy9uCevTBrms0RTVT+1Wcwwt0/kk0qILcwyxsQHimDd8IVdImyu88h4MGI5Z9hrTpbf+2MTtOV6KY1QuuY5LhoZYxLxJrJSzuWcb4SPXjZQSOeD0611f2qoqjariWkxvMItJLcLhM7GMxSnYLuNY8FGP5IglT/AKdTWfS00xGJnfdW3G3Lm3tukTAqAqnoONHM2R7Y8YHOuLqacTnVmJY3I3V65lCgUCgUSUQUCgUCgUCgUCgUCgUCgUCgUCgUCgU/rkl2tGv7bTbbiztx+M422i4OwoR74cjut5Dl93qdLepoozzPu3t1UwoaqB6W0iz+kLINwl/Sw36JHgR5fwrj6qN+cs61SsqcRjZm85qD/jtx+9f+Y195aq/Cn4hwTG7u2P8Ac7b9zH/ItfHfVP56nfQtQzzQEmGR4yepRiv+lctNU0ztOFollLy5jkaVJnWVvWcMQxz5mpi7ciZmJ5JrnvItzOgcJK6iT1wGPe88+fz1WK64jETkiue8tWmZokiwNqEn4y2OZz7AB/3q3jTG2E6/xzhJ6ZJ6Z6ZgcTicXH6Od27p5Zqab0xczg8Sc5w3g1OaGcTKq4AAWIg7AFYOMc8+sM9eZ65q8dVXTXqiI+Exc3R29zwN+EVmdSoZs5XcpU45gdD41Si9NH5RjVKKasQxb3Mtu+6PGcFe8ocYb1hhgRzHWot3vDnMbzKIrmMym91bpjE0h4rw5MTSFmKuSDv5nqNowOnsrSnrK9vWY4X8SdpQ29yYN5CKzOrIGbdlQ6lTjBA6HxqlF6aJzjlFNWEVZce6uclQgoFAoFAoFAoFAoFAoFAoFAoFAoFAoFAoFAoFTVO2A/r/AK1P9cGkqNpQVaJnMYHltS/v1z+9f+Y191a8lPxDjnl6Oxz6LaKo3O8UaoPbwx1PhXyvX29fUVOyhbubW4tHVJ1Cl13IyncrD4+XSuS9080rTGEVc6IKnMdsElRPOU/1wVOcoKnv7hVUlTHOTO2Cn/wj0wUykorgqElAoFAoFAoFAoFAoFAoFApMhQKBU7JKhBUhUBQKBQKBRGCiSrUcwPLal/frn96/8xr7u15KfiHDPL0VsrC1tijYdIoyPH9Acj0r5Tqqop6mXXanC7dzNO1vIXLqYFdc47pctuHj+r1qOrns1rnLRYyTXFolGQxctyHevjjqKeF7jMNtJMCUHIdWPIf0aUW88mGJYnicpIpVh1BqK6NPCMNP6+j6aiaakYKiISVAUCgUCgUCgUCgUCgUCgUCgUCn9Rds9D1K9i4tvAXjzgNuUZx5ZP8ARrstdBduUZhemjKf8FNb+Df++P8A3VePpl/GVps1uYylSVYEMp2sD1B8iPCuKaZpnEs/xjlioRVKe0sLq83+jxGThrufHh/3Pl1rSz083FqaMoP9KzmFSoCgUCgUCgUCgVanmB5XUv79c/vX/mNfeWvJT8Q4J5eu0zR7u6tIJHmEMRjTaEG9iNo6k8s454Ar53rbFH3Ey9C3ZmqIl1LbsjbygKZ5iF7oy+MeOBgDPWqxGvbEOiOmjOJlZ/AOAjMV7Mh+Zvm5+z21t9lnsn7WO6GTsVrMB3Wt3FMfJwUP09P4VnV9OR9vU5uoQ6rbLtvLN44lJO6McRM+eU+6ua50l2IllVTVTyrT373NrtDhhEp2NyyB5E+Q9tctOYmNSmpYcWcVhFDwdl42yRHxhth6liPMe2uy/piF9se6vXl8yzgqAoFM9gp8hTO5uUzsYkpmMkFAqUFR8pKQZKBUxwFR6BTEkxJROmSpmf6xwR5crlrreqWcfCtrlo4+oG1W/nHKuqx1t21TiOFqL+IS/hRr3w0/5Iv9tbf5G9NUb7St9xMe672ys7a1ks+BGEaRZBIefe2lebZ6nvcyeZ8a6PqtuIppmPVp1FMQ4NeM5Xp+wmPxzn/hf/Ova+k07Vezq6edp9nlYfya15Fzzy5pb1T1Ruf199JmMp2KmY/9CCoCgUCgUCrU8wPLal/frn96/wDMa+8teSn4hwzy+iaIP7Nsz/8Api+c7B8ea8Drv55et08YpjK+8bywSQrI0TOpAkT10z4jIIz9NZ0VTTLecTUoz9l7OCxc6TFwNVjXNtdhiJTKgyOI/MuDjmGzW9N33Ite71EM7bRn1vHb/QrTxfdeI9y81K2s7aS4u3VLeNSZHc8gPPn8ePj5Vp4mefU45ebubHs32ikdbKT0bUNpkCmN4Hdc43GKUIXXOByBrOuzbndhXZirhwryO7trySG9ULM3MFfybqAFG35gBXkdbRPo5dM01NK8+ETzkqQoFNURwSkigaXJDIuP15Ej+jeVra3Z8RMRlak0S5jtI7pjGI5GI3mWIJyxtw5cA7ufTyrp+xrpjOzWLE4QR2UkshhjaN5Qm8KkiybueMDYW5454rCbFWcZhSLc5bRadcTWvpEUckmZNgVELcsZLZHkcCpjpa5t5iMmjKJ4JIZBHcI8R5EgrhtvTIVtuazmnRP5xiVIpwlljsYhFmWc8VN/KFOQ3FMH37r3c10zYt4jMtaooxEtLyOGG4kgid5DEzI7sgQZQ4O3vtn58Vlfs26JjEouaImITNpFynC4imJZI3kaSRWCJw95IJAPPamavHR1V8bZ7pi1wrzxCLhkSLKkqcRHTdjbuK89wU9VNZXunm1zvnspNPCeCzt3ktYXlkE116oWMMozI0Yy3EHivlXRb6aJojmc9mkW4253RKtpLBLLBJKTEivh41UEF1j6rI/PveVVq6aNM4zGO5NuN+Wwshw1YzRh3ieZYjxN2yPdnns2/wDpnxqlPRzNETqjf0Vi1VON0iaNftHK/o8wMahgvDbLZIGB9P8ACn2tWmZxOFYtTurW8LzzRxL60jBVJzjJOOfKsbVvXXiEU84egabStBxZXlp6VNgScZUVtysSBkSEYORjHz58K9n/AE2I01xmXTrt0bTDH4Sdn/8A8Y31MP8AuqJ6zpseTci9a407uHeX1xfS8adm2qCsMbHcETyz+kcY5nmfGvO6q7NyfZhNWd/RDXKpDraBZ6hdC6FndG27mH694tnb8WcHvdRXo/TrVyYrxLW1E/k48eNox0wK8+fOydGxt4Xtp5XiSR4lyplnWNc71QZUlTjvdc+yu/peniuiqrs3t05arYxCNVlcLK7W+ZMHEfHSVgp59O6uTUUdPTFuYnk8KFNlKsyMMMjbWHXmOvSuGY0TOWE7SxVQoFAoFAq1PMDyupf3+5/ev/Ma+8teSn4hwzy9PfatcQadYWds2ySS2iaSQddu3GAfmrxeop/21TLtquTFEbqdo17E26O4lVx/zf6g8j89Y11M4qq5zy9Fp3aeaPuX0e4f40Q5482Tr/lqsaZ4ddF+fV6K01CC6TfBIsq+YOfp8j7DTh1010y3uFhuI+HMokjyrbW7wyjb1OD5MM1OtMq15bJcXNpcklZLR2ZCP0g8TIyHyByD81W8dXZT7QWo1K32jlOg3Qv5OOQ/hy+Ksq51bMr9OaXmYZOJGG6HxHkeh/jXk3adNWzlnGmG9ZoKBU5glNaw27sWuHCouO4SAzt4KM9PafDxrfp6NU7zheh0HkuJIIzO0BhlkmWSBZ4QgjCQ7Ah3YzHt5eXz8/TrzNFOqYw6I4U7e1ja7RYZveccYzrlSkY6s36rAKRXD4P+3afxc1NO7eyiguyJrvuWMaNBbmTGA02QCfAtl9xI6YzW9muqmrGcUtqKsK8pljuPxiJd0KiH0ds7BtXHQMOvrZz7elYXq58TM7z7s7krV/OIXtYmtIOKLcbwTOCm6R3A/K8sZyfH5q6Ll2mIpiaYyvXXGmNoR6nKJdRukEUUWLlw0o4meTEd7c7D6BWPV1ZuRGIjB1Exqhcu2tGMckCN7xYTIZT6pT3+FSR1yz8xy559ldtyun8Z9MNf6xUoTRO8dqyj8lZ72PkvHkHX564rsZt0zv6ueYzRFToWVxw7rS4vSbhOSZgj/InfM7AueIo7w/5eldNiumMU5lrRPlUxdcewvQbu7uPekO24Hd/LRc8cWTn81UrrpmmvcrnzLIhn9FjkW1DRCxuA9338qfxju5DBeXjlfGr26KvDpxETHconFNKlstPRbtoBjdaR8VOfJxNFu5nqDgGq658KqYqycRVLSxlS2uoJiMpFIrkAfqnJrg6euKLsVzw56J01Zl6HU9Il7QXK6hZOgteGIkaTcpYqzEsBg8huxzx4+GCfXv8ATT1M+JTw6rtqbm9OFf8AAfU/8SD/ADP/ALK5qvpVyIzMwp9tXzMw4ciNFI0bjEiNtYe1T5ivNuWqqJYVUzGzWs8qy9P2F/8AvP8A/P8A+Wf9ede39Jnarfl19PiIn3eVg/JrXk3fO5qnSsr+S1srtYO5MQjmT2LLEoX4iGbNdfS3NFivvLS3U0/uG5rtlmuGYOtpkOTIgIQydcKoY8s1PiYTnCkoIHP1uvLzNcVyc1ZZyzVFSgUCgUCrU8wPK6l/f7n96/8AMa+8teSn4hwzy9FJZSSvpxUZEtpGF+NFyf8A2mvF6yfzqdWnNEOpbaDIerqPi5/dXLDem3tC6vZ2Ujuuvz8qaM8NIs45QT9n7mE8XhsrLy4sJIYD9pcN9NTvTyTbmeGq3uqRDuXRcDwkUN/EAGo8T4VirT3RvrmrJzJhfHMgoy/x3H/SrZp90zeq9MOlp+qJqEBkA2Op2yRn9FsZ68s0m1OWsTNWzhTII7u6j8pCR/8A0A//AFrzOp8zmqp3x2YrmVKBSrOSSpqnbZAxLIsZxwkJZVwMZbAP8oq83JqpijstrlkMwV1BwJBtfHiM5x/CqxVp2KamZXklKGRi3DULGD0UAY5Vebs4+CZbC7uA8b8TvQjERIB2/SOePDPSni5/LsRKLnuZ2YtI5yzMck1E1zVOexO7Z2aSR5JG3PIxZj7WOfCoquzXVmSqctpLi4khFu0h9HGMR8sciWHtPNiavN6vTo9DxJxpZe5uGt/R9/vOMFdi5xu343Y3Y3c+tW+5q0eH6J1baWvHm44uN5MwIIc8yNvTH0VTx8SZ49mN8gt/R1YCH9IBFyeeebY3Hn7amm/tMd06uWpGTuychSi8+iHOVHkDuPKlN25H4xM4V1zp+ErXNw1v6NvAt+QKhEyQG3Absbuo86RfnRpjG6fEnSjrHCkxnlLFd3cK7YbiWFc5IjdkGenPaRmt6equ0xppnZfVc/q290dR+G3P1z/fU/d3ZjzSmK6/WVdVCjA6VhNVVUs8xPLNMxHJLId13bWZd67G2kjKn9Hl4eyr0V1R5dl6ZwwBgYqk71KyEA0md8RwMBQOnLPWp1SM1UKBQKBQKBVqeYHltS/v1z+9f+Y195a8lPxDhnl7e1t/SdKswDtlSKJ4X/VdVGPm8K8DqZ/2VPStxmiHS0+742Uk7k6flYyc/OD4is2tE7fDr23+tXiJb04dCLbj5uXxfwxW1K+zlarpltc7jFhZ1/V8/IgePOs6rPrjZldph5mS0mZzGqEyA4wBzrKm3VM+zm8OXp7ZLZbdkaxkE/6A9GPT9vbj/wB1etVRmNnZEaXkL6ORNSui6lclcbuXRF/8V8/11FUVOG7TOrKOvOU5KfJPsVKClPlykqcTJMlVRkp7JpKnjnhElKucwsVM45QVUKJyVKIKgKmJk9CojhPoUQUCpSVCCpCoCpCkbJKhBQKBQKBQKBVqeYHltSz6dc/vX/mNfe2vJT8Q4p5e60lv7Ptv3Mf+g61871sf7KnpWasUwsvEk23dkOvqOpwwPsI6VjFWGlXErEF9dwcmAuEHiO7J8/6BPzrWkXSJWjr8DRMpMsEh6Foy20+e5dyfxremuGsVJ4rmzuFht7HHG9aZue1Yz1dm8S3h4nxr0adNey+IBLO+V00CKEnvXGBxJPMg7SAAOnLn7KtTaiNjhT1C21S3mSRbyfhspG3iN64IOcZx4+VRVXpJlhL43A9H1dRNAeQuBgSJy9Y4xkdc8vbzFY1W6Lvm3VxEuLq+mvptyYSdyHvRv03LXz/VdJNudnJXToU/6FcemfVlwVCUscW6MuwZV3Kqy4JTJ6g4Hlz8/Zz5aW7eaF6YW7jTIFWPgTiWS4IMEWGBIJ2YyyKPX8TjkM458uu70Ph0aqZzlfwv+6S30i1ml4ZnIbgiUr3ORaHidXdPHyB5dSOtWt9HGrTVlaLUKTWjNJIlvmYR9fV3e04Rn5e3Ncly3pnTTuxrp/PCOGCSZtsY3N12+Jx1wPEjyFZ00ZnHqjGKsNSCCQeRHUGoiJp5RMMVWmCCgUCgUCgUCgUCgUCgUCgUCgUCgUCgUCgVanmB5XUv7/c/vX/mNfe2vJT8Q4p5e50PSLi5tLctfNCpiXYqRrgchgHOSTXjdRRE3Kno2KNce0LE8F5p1wsF2Vkjlybe5QYV8dVYc8NiuW7Y/GZhpOaZ01cSk31zpZ3USvWjxpZuWdY1lfEjE7cJ456Y3Zx8dex0kT4cT6tbcO7BHa2tvxWKRwr3y/IKATuzn4+ea7Kuy7l6lr+jSbMXAZBkbwjlM8jt37dufZmsrtMyrVCqJdNvMJDcRSsSNqBgWznI7vXqK5dFXopjDElvYahaQC5VbiOJiIyDnkQejD9mtbtGqnMrTTmlydd0GDTo1vLFj6GSEngc7uGzHClT5V5fU9LFVGY5cly3FO8ObXi5wzmYW7S4gjt5BKX38SN41jO1iVD9GIO31hXXZroinEtKKoWrzVsw23Ckn3qu7vzCQBhKxBddneIwP4eVa3b0RboxVMtKrkJ7XUo4kkTikBhaqihj1EBD+rLCB0w3ex51009TT4lzM9k03YUrq5hbUbm4kLy++sYtrYB7xx3+fdwPCuOu7TTcmeWddUatSF7pbm4MtyDjHSPkTjplm3H52yayiuJnXPPspNeqctby9a6YFgAF9X9I49rNls/PVLlc1k1xKCs8K5gpgKYCmApgKYCmApgKYCmApgKYCmApgKYCmApgKYCmApgKYCmAq1Mbx8jyupf3+5/ev/Ma++teSn4hxTy97ot2I7G3HLlEg+gV8/1VeLkvQsXMxsm1u/4lnbwk5ka6jaP2BB3j/lNRrmbctLlW2PWUYauFGzO+ic0ujpbQzYt5VWRGOCjDcDg5Hdwfmr2ejqmbeHRbenaCGe3MLxq8LDaY2AKkeWOYrt913PbsZoLoIza+9Bt/BEkgi3427uGG25xyzikyJ4dF0qyw0FnBEy9HVF3A/tHnUDg6nNb2rcOILGqNhUQYXx8Byrl6uvTamFL2aacuPrWqB7JrIHMt00fL9VI3D5/hXm+JVomXHXXGnChXjY9lCk0Bmo0kyVaY+TJUYxzHJkppx6SQVGiQpokKaauxmCmmrsZgppq7GYKaauxmCmmrsZgppq7GYKaauxmCmmrsZgppq7GYKaauxmCmmrsZgppq7GYKaauxmCmmrsZgppq7GYKaauxmCmmrsZgppq7GYKaauxmCmmrsZgppq7GYKtTTVmNvVGYeW1FG9Ouf3r/zGvvrVH4U/EOKeXvdN7KazLY2s9vNAYpYY5O/uVl3qDjuhgevnXldV0dM1TL0bNqrTl6LReyMFkxuLxheXjDbuZe4g64RTmr2+mpppx3dNq1FM5nd1/cqw+DRf5F+6tPAo7NcR2Pcqw+DRf5F+6ngUdjEdle90S2mg2wosMg7ysoA5jp0q9uiKIxCY2VbTVfR8QXacGUH1uitluZyuevP2E1YXPdiP0nZ736Nw93pPGT1842bM56c8/NQU7vVfSSbezXjSE91hzA55zz8Qenh458KCCbsRbXYR57q4SULhuEyhef7StWV2xTc5ZVWs8zK5Y9kdFs0Ki3WVz60s2JHPh1b2eVR9vTp0+iabVMRhZ9wdI+BQfVJ91Pt7f6wtog9wdJ+BQfVJ91Ptrf6waYPcHSfgUH1SfdT7a3+sJ0we4Ok/AoPqk+6n21v9YNMHuDpPwKD6pPupPT25/rGyNEHuDpPwKD6pPup9vb7QaIPcHSfgUH1SfdT7e32g0we4Ok/AoPqk+6n29vtBpg9wtI+BW/1SfdU/b2/1g0U9oPcLSPgVv8AVJ91Pt7f6waKe0HuFpHwK3+qT7qfb2/1g0U9oPcLSPgVv9Un3U+3t/rBop7Qe4WkfArf6pPup9vb/WDRT2g9wtI+BW/1SfdT7e3+sGintB7haT8Ct/qk+6o8C3+sJ0U9j3C0n4Fb/VJ91Pt6P1hGinsx7haT8Ct/qk+6ng2v1hOinse4Wk/Arf6pPup4Fv8AWEaKe0HuHpPwK3+qT7qfb2+0GinHEHuHpPwK3+qT7qfb2+0GmnHEM+4Wk/Arf6pPup4Fv9YTop7Me4Wk/Arf6pPup4Nr9YRop7M+4Wk/Arf6pPup4Fv9YNNPY9wtJ+BW/wBUn3U+3o7QnRT2PcLSfgVv9Un3U+3o7QaKe0HuFpHwK3+qT7qjwLfrEI0U9j3C0n4Fb/VJ91T9vb7QaKezHuFpPwK3+qT7qeBb7QnRT2hn3C0n4Fb/AFSfdT7ej9YNFPY9wtJ+BW/1SfdU+Bb/AFhE0U9ofE+0UMaa3qKqoVRdTgABcACRvZXs0R+MfDxqqN5fZezIzoOm/JYf5FrzbvMvXs1ZtujVZaYZ3UDdQYYBxg9KCvLYW03rruB8/wDv40EPuBp/Xhn/ADH4vOgnh0+2i/Jpgff/AOaCcDb06UGQ1ADnxoG+gzuoG6gxvoG40G1AoFAoFAoFAoMVEjmazrZ01olEYcyhjksVA27R4K/XdXL1XVeCiZc+y7Z+lSRj0dQryLHkOxPeIXPONR4+dc1v6nTcrimIQ9HXpRys4+s9o/c2fg8JX97EhJcr1LDAwjfq1w9b18dPNMTHKufRFpfar3QuIYeAqCbdgh2Y91SehRf1ar031GL93REGfR3a9H1WcLVO1foFxNFwQ4h2gnewPeUN0CN+tXn3/qNNqvTMKzKXRu0nulPwuEE97MgIct0K8jlF/Wq/TddF7gy7FduJWecvu2gtJJFMClY5GjzvYHukr/hkdR515d/6p4denCuXQ0fWzqTSqYxGYgp5MWB37gOqp+rXT0vVxfpzhLpk11ZwmXmW7cbeHm3X3z1ffDn5/e/bXlVfV6ac/jwo7Gkar7pQvJs2bH2EA7h6obOcD9au7pOo8ejUtlerfhL4R2lP9van8rn+0avYt+WPh5FXMvs3Zgf2DpvyWH7Na8q7vMvTseSFTtTYG5tTNHHfTzRK6xW1jdmzJZ8d5mE0Cnbt8SfHkarLV5ptU1O/VMOdRstP0u1vbiSK8m02SZ5RKWkXgxh2JERwjMiDx/5Zq2yhZudTnuJrnV4p51NvqFha2kPFdYfR7pbUuHgRuEzN6S3eZSRy58hUzxHuOR2k1Sw4vaKa3m1yJk0xbmyA92YViu29MLOU7qxp3I8bwI+Rx0aoF/tfq7Q6LpttonpDbtRtkW2vba6ku2ZLqCZZN1/PaycJZCqlmypLKm5OoC12Snkn1q3uxPdul8uutJFPLcbQLfU4YoPxeZsQlImK42qR0POgv3mpe6GpaRIse2CDWri2hlzni8DTryOVtuAU2TCSPB/V3DkRQc/tZr3GsNMaWRbB11R7XUYZb+XTo1aK1uWKvdQgSLG5VJIsqN6lDgbqDm6Dqmu28llqHpMMyz6X2ZjuVnikeZ0vLiWBjxuOO+Gkd9xQ55DHIlgra9rWlSapalbrSbyynvZOPb3GvzT20sXAnePj2ssUkEKhwjLtDBXCqOuQHT1+aXUexvuf2b9zo1uePZta6XdxvEZZUbFtFiykV96vxJOUW0c94Xc1BH2c/Cb8IbTUprlZ7HVrS24EklzHsniXjzFRs0u3JkRJuKsfvZPPvMoYIHntXvrdtTdU1OSNdOvZ1jSa+IkBi41qQfSe0MMg5Me8EjJ/ZYgh6SG4mvextq0EnFsNRvUtNTeeSWZ5Ypr5NPkhg33V6EV0Ld9bgjxUAvuQGiSaiurS2ltqd6sEUlpd3NqLa1ZUl1G6uZ5xNCUa5himVFKAyGSISBpOSttD2tjJqO6f03g44p9F4O7PA5beJu/TznOOVELlElAoFAoFAoMGhDg9oYo7/wB7RWFzB6j5QLhx3gdzDkfOvL+oRTc/GeVvD1KkOkW1pexz7PxeIBtqFF98X9JizL5fTXF09Fu3XFU8r1WnpopeJGrjkGGRnkefsr3oqzGWbga1aRalcK0asHjPCnJKbWjz3gRu3ZGcjlXk/UJt1zETnMJptZnKOxsbfT757pozwl5wLHs2ru9Y43bieZGAPprPpfDt16t8ymbWJy9LXt8TlV5q9sLfUL9LpUPDb8ur7MNtxtON27PLpj6K8TqqKLtz3WptZSaLaRabcM0isXkPDgIKbVjyMYG7dz6nlWvQU02+OUTbw70svDjZz0UEnHPpXq1zMb+iHmpdItrq8efZi2lBbaxQ4lbxUox65z8deD1NFNyrVT68rRZW+z8K2HvTq3pU5y7ZQju9ANrHlXd0Wm3+CJow7FxcrBE0jjurjPz8vHFd1y7FMIxl5j8H4sz7Y8Jt/FFfbuXxK5BPLI5Hyr5+5ZpqmcerSm062gxw2kXogRuN+VldtveY4BPdZsdOWfAew16/SYinTTwzmjDr128IfB+0v5+1P5XP9o1evb8sfDx6uZfZ+zH5i075LD9mteXd5l6djyQan2fsNUdZLnjh0UoGguJ7YlW5lW9Hkj3D46pPDWJRXvZDQ73hcS22LDELdUhd4EaBcbYZFhZBJGMckfK9eXOk7iWXs5pcl8l+0bekJtOFkkWJmTkjPCrCJ2X9FmUkYGOgqRWvezXplhrVvLcfjOsxywm42Z4UTRmGKNF3bisYJbG7BkZ2G3dgBZ7QaXNqdh6NBMsEyz29xHK6cVA9tPHcLuTfESGMeOTCg59x2Qw2nvZXslvLZyO08rDe08c91Fe3QPDMWxppIBkjuBWddmCNoWbnQ5Zb/Snglgt9M0pt8dkkB3lxBNbKFkEiqkapNyUReHWg21bsta6nPbzceezMMzXDi1McRmkaH0YmR9hkzwSUDIysM8jkKQHOs+wsdlGlrBcYsRcxTyRsJJZRFZSJLZW8M0srmOKMx5YNuBLPs4eRgOlf6Td3uq6fdekRJZWEjT+jcEtK8rQzW5994gAXbPnHDzkdedBPqemi74ckL8G7h3cGUDPkdj7Skhi4iozorru2gE7cghyezfYTTtDht03tM0MMUToyqIXeIQlJOFg4KzQNMneO15JG6tQc2P8A4dajDLcPbawwSed5ffH1RpeZwiyPFqkQcxxhY920HCjNBf0vsVLY6Rb6V7q3KRRek7nt3mjf36NoYUiM01wY4reN+4nPvqj5yDuDe27Laj6QHvb+H0ZZ/S1hsrZ7Yi64kbmQPLPc7Q6K6OsYUPxZN2SxNB27HSrOwa4a2TYbqY3E/eY7pWAUtzJxyUchyqELVSkoFAoFAoFBg1BLmasH4sJSJncbjuUc+Q9XPgDnr05V5/WWpr2jltanCvwroTQiaDd31Pd76YOc55ctvX5vM4rnp6eui5GqMwvXXEu1Xsb8OdytQSX0xeFEWfh43DkrZI9Zv+T/AK9K83q7Wq5tDa1VENbeOcX0Ynh9XeN3VOgO8Hw6Yx7fZVLPT1UXM1RmE3K4mNnYr1MOeHHnjne9lEEJG4J3jyTA57yR1OeWPZ5HNeV1Fiblf4bOiiuIbackovG4sJVtnXqoIP6L9Dvz8fLpWnR2Zoq/JF2qJ4dWvRmNt2EOLwrkzzCCHaN7Hv8AcTHLAGM53dfn8xivHu9NXNc6IxDporiFjSg4kmLwsjkqcuMHy258en8a6ukt1b5pxKl2rLolQRjw8q7ao/FlDiW6XfDPCt9qjLFG7h5n1EBx6vmeXT468X7a7VXOOIdFNcLujqRFJ3Ch4jc2XazZOeecfs/NXo9HRNMbs7s5dCuv1Yvg/aX8/an8rn+0avWt+WPh5FXMvs/Zn8xad8lh+zWvMueaXp2P44dHFUas4qQxQY2igzigxtoG0UGaDG2gbRQNooG0UDaM5oGwfdQNooM0CgxmgZoQZoiZM0SzQKBUYGNgqZjIxsFRjbA2xT0GNgqZgNgqMDOKka7BUYgZ2CmBnFSMbKjG+Q2CpCmEZa45UiCZZqswZZqyZfBu0v5+1P5XP9o1erR5Y+Hj1cy+0dmfzFp3yWH7Na8y555enY/jhNqWopYwcQ4aViEt4SdvFmf8nGCehY/R1PIVSGqrbdqLKV+G4dJDIEX3qV0KSSmKCQSKmzbLjKnOPbUiOPtXby280scUm8RvLaRukkZuEXaqbCyY98d1CgEnmPE4oLE3aC3SznvI4ppo7YkXCBOHIm1OISUnMRxtI6fNmgzbazJNeeiNY3EMiqryNIYNqq+4Ke5KxOTGw5D4+XOggTtTayvIlsvpbLcLboLeSJy26Hjb+86KB3WXr1FBZGr7rKG/jiLWssPHYlkRkUpxF3b2VOfQndyOPDJAUNO7ZW9/dm1jgO4yBUIntWyu1WL7RPuIGT6gbp58gGlz25s4Z3t1hJlSRkbfNbRL71II39eYMD+oGA3fFzAXbDtJa31iL5El4RYJtRfSHyVD95bYzbeR556UG2ma/DfnaIpo24kqDdDMExE7KCZCgUEhehPI8utBU/DK2NuZ/R3jBhM0JmeFUb8kFVmSSThk8dPXAwDnpQdD3Xilh41iPdBd+w+ivE2CBk5LyIvLl4559KCOPWZGuoraSxuIWm3bWcwMMIMsTwpZGx0GcdSB40ElxqhjkZIomnEODclOfDB6YH6b887Rz28/FQwQalrctu0AtIUuVmieffukxsRolG3gxTls8UHkOnOgqW/ai7lKn0ROCZUid91yuC8ywHHFtY1JVm5ruz1oOhqerRacIt6tJJO/DiijxuZj+0VGB486yuXdMxHdeijVCoO1VmYFkEchlac2wtsDi8UHmPW2/PuqkdRGInu0+3nM/wDv6Mr2ptGhV1ilMrSvB6P3eIJI8ls97byC/rVE9Tj3R4EyntddtruS3jhDMbiLjDl6icvX8s5wK1ouRWrXamnnZZ1DUI7C2e5lDMqctkal3ZidqqqjxZsAVozUV7SwlYcRuzmQx3MSRzGSLbFvY8MxCRlDMi52/pD4qDE/aywSJZIBLOC8C5SGYri4MZU7ghGdkgYL1PIdaCz7uWhs7m7USFLQMZkMbRyAoglI2SBDkqwx4e2ggPaVOHG4tblt0jRyRrDJIyBJGhc5iWSMlXTmN/q8xk4Uh045uJGsig7WAI3AqcHzDYI+cUEd5fQWUJnuHEcIKqZD6o3sFGT4cyKDmJ2rga30+YRO3pwBPCSWZU7jsRuiRgzqybSvXx6UF+51JIbm2tuTSTybGXPNFMcsgcjyPBIoKlx2kht7Ke5kAWSIXTRwlsbxay8H1sHBdtuBjxwM0EcnaqMStCltJ0LJcO8CWzJt3rJxOITwyoLZCk4DYHdIATXmrXtvBDcC3i4LqpkaSSZOGxGTvxbsUQDq77ceIFBJp+qXFxDLcXUUUFsvOKZZTIjoBkyZaOPCeR8evq4JCrB2stncCSNxHIFNvJEkk/E372VcRI21jCqy7Tzw3TlQTSa8qxRzpbTS2svDMUy8MK3Fxt5O6sPW8QKwru6fSWlNvVneG8mqyJaXNw9tJHwELhZCnewCeWx38qTd24ki3vHDnTdp7uKN5DackBY/lxyAz1NvisPuKplt9vD0AORXZRVly1Q+Edpfz9qfyuf7Rq9e35Y+Hj1cy+z9mfzFp3yWH7Na8y75pl6dj+OEeumDbEGjZ5w/EjESCWbZbsty4AyDhzCqftFc1Vq5tleQNqDGK89KlLwqBbyCV+DHIQZXKllYO11hkKoEGdg7isQg7OpFdS6WkktxNt02TaJYjCIiwt1PAkWKInukjcGJ9vPnGYG8sEt1p18sd80j3kvAilhEXDune1ghZ/Vk7oZGLcM90BvKpgX7WxuU1u4zf3D7be2ZsrBhxxLjutiEcu74YPPr0oKVhYuNckXjvPPDfNPdAn3sJJZYDYO7Zh5dqDPNeXe2cgrPNYXOkadDcd1rJGtbpsxpIgOnlZQGkIC++SIh34w+AfCgaJcIdXZ7rVYbr8a3xxpJbjMzWqxBjhFaUYcxApt5gHbzO0Mzd5rcrcRxl3vGjWPjm6Mc9y7iREtp4XkhkCjBVT0DdCSoXIpopNN007jLDFIYJvc+S4PCjETsgItZZDuG2MNln6n46CHS/R4prSELerLLe3G4TNfRpwwZ54z3ysbEhVyDnPPPPNBVsrIwPbMHVpo+F6Nt3b7gKtjE5t2I7wK20ik5HdIZsI26g9LoTRGz7kiyNxZXlC597kmkaYxkEA5TfjvAHzA6UEWi3FvdXGo3MLpMhnWOOZGDDYsERChhnuh2bl5k+dCXAv76xjubdLOe0htuOQY7fVJYY9gjkxujjVUi7wBO3q3I9c0JTT3FsslobOGGXiRXSziynnfv77Zt5ntYnmLnau4svxt5hTt1ureWJCkvAlu4twdr9lVnvUnUgT26R554ZmbJ5Ec8hg9LrtglzFC/DmaaCQPE0BjWRSPbMQuPjrlvWdU57NbVzGY9Jcq27OTR2XFuVne+a5NyOA0XERiMcy+2Pp15YrKOn2dFXVdsYxjCzo3Zn8Tc6jk3M07XBKttdCRtHfj2c8cjir0dNj3Uu9RvttCodF1CFEljikTdJtktYJBG6QIhWFQ+9ejd497xqtVuc7bLxej13+V7UluYtAgW7d/SEksuLLGN8m4XEWWUYbceWQNpyeWDXdDkqRabwANRvGu3iZL2Eve3KiF2RIoRw5VIhGCHZRuXkTuHPnRRyhpGoQ6YJZYCkebB2Zrua32rFHbCQvDGCq7WRtznDLjPgKJWlu7X3N1azSaKee8inljWC4N5j3mK3RGlfDl3c90Y9lBXtOds0IQT2u7dAYYZntve7y74ixrCk4USptjI/Ub9L1SHc0s6jNbaJMkx9H9GD327BMm6Fdvfbv7t5zy688noCHSu4HmhKx8PiZVkMqcVQVYMCVDKTjby73Wg8dNpNm+naOZ2VZrmKxEbstoXkPFiV1xJCZDtjdQMEjA7w/WC7qC2aazDaFpHS2jtRIltu4yqkV6u7bahXUe+JnaoHeA6HFBpeXdnbaZrFoGSO/mS/lm4nMhBOVRCCwZeIs/veBjJLc894NL3RrPj3TROsqh8y3nBtJUgkY+++ks8Lsx3ZchTyzgiJQGoOjrVtptlostzBcyW4W2K2LLdzJGSsXvQjHE2tyUYwOftoJxpltpRnumDtaRgmO04sk/FkMgl37ZmI4xm5IBzyc5O4bQ5ga3gls7J7wB7QCBYZJOHK8qRvZRoqRtxIVk4vEEgVyQc5UKtBZvZ7C5lsEuLp4nKCSdJpeA4CpuUSJGVCy73U4wOh8q5b0avVranEVbNoLy1MGpW6XsbLuxG80vFCxukalvfC24BmOB0J5eNVjid15jy7OPBPbNfNmKxVSsa5MUHDXvNzx6T1588ZPs88LdVUzvDoqpiKfX/APf8PbRyrIgdCGRhlWXmDnxBHKvSp4edPL4X2l/P2p/K5/tGr1rflj4eRVzL7P2b/Men/JYf5BXmXOZelZ/jhdd0jGXIAJAyTy58gP41SqrGG0Qbh51EVxJplqZ4QhkLqETdl88ht9bJPkRzqc0miZZkkjQbnbauRzJ5Zbuj6TypNVJplsCM8utImJMTDV7mCNijSIrDZlSwz74dqdf1mGB51IXE8FvGZp5EijX1pHIVRk4GScYzQQ22qadevw7W7hncDcVikVzjz7pNBZFBq0sasqswVnO1ATgsQC2B5nAJ+Kg2oNTIgcRbhxGBZUJ57VIBOPZuH8KDb/X+vpoMZWoivJiQY/ryqZMsJJHIN0bBlBKkg55qSGHLxByDQSYoInlSMbnYICQoJOObEKq/OTge2hMNFuYJGCo6sx37QGBzw22P4n1WO0+VQQ2e4gRirSKrDb3SQD74dqcv+YjAqYJjKTl/2qBSj1/R5XWOO/tnkchUQTIxJPIYG7nnwqRd/wDFBnrQZ2igha5gWXhGReKcYjLDPe3Ecs557G+g+VBIP/NAoIxcQnbiRTvcxrgjm6Z3KPau05HsNBtE6SqskRDxsMqynKkHmCCKCTaKCN5I0Kh2AMh2oCcbiAWwPPkCaA8iIMyELzUczjmxAX6SfpoNUuYHbasiEnfgBgSeGQj4x+qxwfI0GTcwIxVpFVht5Ej/ANQlU5f8xGBQZ2JnoPbVNHtCdTPDQdBUxRHZE1nCT9UVHhwnXPu2xyq6r4R2l/P2p/K5/tGr1bflj4eRVzPy+z9nPzJp/wAmh/kFeZc5l6Vn+OFftA86tbbN3D3ZfETSgYwQ+V6Mn6OQQTjlyyOO/VMYdtqIc6zihhlt5reGLiw3UyOoGyYh5XRSnd7yqhYn9nryNYwvUoaq7xpd8MSxQSS7TxJXBYi1Ld8Es247hgE88BSBWF2aob2YpTyzXMls6QymTF5EoKTceJfyOPfZUds7yMDlzPiAa0nO/szpxmF/Ro41ureZYhHNML4ynADHFwu3eVznA+OtbU8e7K7HPs40d0IbfUotgW040klslvAbeGSa3tVnVt6TEpGeEHG3BbIYNjcB3Od1dRJtdMu1R2dYboGRp7gq8MivE9usTSpdKQ42MS7Y589vMKDS7yaXVIXa9tLyXY0SJ6bE7CN2R5CqRWkRY4j8T99Bf0uyEWvaxccaJ+P6N70jbpI9kZHvg/R3dR50E+tSTxxwPHwmh9IgSWKWMvnfPGgKHeoUrncMg88dKDk22lRrq7yrptqjQrbSRW6xorRrNLIrsXXumVeGHzzxjYvrFiHIurh4tTuBJK1u0W1IYZbxmdVZVkJ3vqNu2WyAwGVyBgnGaD0/ZWUz6Sk2STI8uSZHkzw5GjGC8s/IhPByPLNJFRIlj7Xci3fsyxyzNz4gGBkkDp0HKuWid3V/0suxdemPtS3Kxq2RLMT75H+whUqx69TgdcN0rqcvplR0hLlU4lsE4JuJopIHd+6Ip3j4yORIS7KuXB5M3eyDu3Bxs6XxccLR9/pvo3oPoqekbPSeBnPF67O96lBatbNUisre32W9vJqV6siRoo70fpPCYdUPD4S43KeYX9XBBoFrPNdOr3crQQubqDKW+H41xdKX3cLOJI0BypGQxwcEYDW7uZVF4s/DbUH1KzWGMFtu1DayBN+CwjUyc224y2cZbbQhdv7OCO40mS8ZZpje540oAG9oJdqxqxOxQyJtA8QDzbvEOfYTXoEN36ZM9zPHpk0+4QFXW7l4RjA4O5VXBIAbqc9ckhDFbW7yXLPBbs5urrLSaTPdMfxiTrNGwVsfw6UHS0nUItL7OvdPCzxW8tyTHBFsIUXMgO2FjlAo5kE8hQehoPJapaXKR3zzcaW6Eknoc0e6NjKLRTGIVizKwDvJhQSAN5cluZCXUYrOGKITejmN72SJbjUW9NiiURMTw2d1YZeEKQzcnz1GKCKwttOmu7WRIbFzDqPCW5tIVjR1WyaYfpSeq5/W6gUGL2S4m1CKC4tpJpIL5laeyb0USlrLdgj0jdxAuO8T6owD4UF/s/dzQaHp4SwuZfeUHrwk+orZzJMDtYk7R4YxgDFB0I9TunkVDptyisQC7Nb4APids7HA9gNBwriG/mvjG6wCR70TbI7q4Q7vQzHwuLHAMHanEPPpgeIyFrE9xFpSbhHbyXMgXbJJclsQzSRyCS5Vd2113LlGHJWU4FBD2ftriW7cPeStDA5u4Mpb4bjXF0pcNws4kjUHKkcmODgjAa3dzKovFm4bahJqVmsUYLbdqG1kCb8FhGpk5ttxls4y22g7UrnTbKWeVjPLkGRj3UBYhc+PDiTqT4DLHcckhPp936ZbJcbdm7PLOQcHG5TgZVsZU45jB5VGBZxUjGKEvg3ab8/an8rn+0avWt+WPh5FXMvtHZrnoWnfJYf5BXl3OZelZ/jhPeadDeLtl3EAHAzlefiUOUbHUbgayrpzhvFWGkekQRFGQupiCrD3vUjUAbBnPdbHPPP6BitNqCa+WJ9HtZ1uFfJ9JJLHkSpMYiymRy7oqKrESmLsxhJdadDcwvGCYt7K5ePAbchVgeYI/RFWmzCIuzn/AMoptEtZBAAWTgNldp699ZCGznO5kBJ6+3marFrH/CZuf9y50G1uEvFLOjXueJKu3eqskcTIhZThWWIZ+nritlF1YY0LFVALnc5A9Y4C5PmcKBQRSWKyXMVw8jkQ5McXdCByGXfyG7O1yMbsezPOgkS1gjlkmSNVllxxZAAGfbyXcfHFBFd6fFd7RKz8Ncnhq2wFv0X7uGyn6PPkefUKQEEOjyxz8f0+4du6Hylt31QkhWKwBsDcfHx86C1BZxwyXEilt1zIJHz5iNIsD2YjFBrYWC2UHBEjy953Z5Nu5mkcyMTtCjq3gKCM6PpvpHpPosPHzu4vDXfu892M5qnhwnXOMLOKur6NLWzjtYzGhJUySSc8dZnaRugHLLcqJZ9GRYmjh953biGjCghnJYsAQVzuOeY5+OaCl+D8Ho8MBnmzDM9xxsqJHaXicQEqowDxm9UAjwxQbT6FbSyRujPAI+CDHFsCutq/EhQ5U4Ctn1cdaCSTSIHW5G5wbmVJyQR3JIxGEK8scjEp5559eXKg1tdIS3478eSS5nLE3TiLiruRI+7tjC4xEvLb1HPNBtHpEEexlZ+Ojb2uMjiOWxv38sEMFAxjAAG3G1cBCnZyyTf75c9+SSQhbmeNcyOZDhYnRQMtjpQWLTTLe1thbDMkQdpBxTxDuaQzZJbmcMeRPP25oLVBy27OQYHCnliflxXAiYyMJGmDMJY3UESOzd0DmfLGAtWml21sowDJICrmaXvyNIsYh4hY/pbBgkUGJtNWa7t7lppMWxLRwjZs3lWQsTs39H6bseyggOgoHEsN1PDcEESzrwneQnGS3FjcA8h6oAwAPVVQAtWFj6HAIeM8qr6m8RrtXGAoEKRrgfFQT7RQc5+ztlPJuus3MYkaWK3kCcFGfcSdiKof1jzk3Hx6k0Fi/wBNjveDukki4MnEBibYT3GjIJxkZVyMjB8iDQQz6FbSyRujPAI+CDHFsCutq/EhQ5U4Ctn1cdaCSTSIHW5G5wbmVJyQR3JIxGEK8scjEp5559eXKg2sNOFmJszSTyTycSWSXZkkIsfSNUXG1B4UFnaKDNAoPgfaY/2/qfyyf7Rq9a35Y+HkVcy+1dmfzFp3yWH7Na8u5zL0rH8cOjiqejUxUhigzigYFAoFAoFAoFAoFAxQMVGAqQoFAoFAoFAoFAoFAoFAqPUKkKBQKBQKBQKBmgUHwPtMP7f1P5ZP9o1etb8sfDyauZfauzP5j075LD9mteZXy9Gx/HDo1nHDVmpCgUCgUCgUCgUCgUCgUCgUCgUCgUCgUCgUCgUCgxUSQhu7uK0hM0x2xr1PPxOKpcuRRGZJnCh+Fmkf4zfVyf7a5v8AI2e6niQfhZpH+M31cn+2n+Rs90eJB+Fmkf4zfVyf7af5Gz3PEg/CzSP8Zvq5P9tP8jZ7niQfhZpH+M31cn+2n+Rs9zxIPws0j/Gb6uT/AG0/yNnueJB+Fmkf4zfVyf7af5Gz3PEg/CzSP8Zvq5P9tP8AI2e54kLVhq1pqG42z7tnrZBUjPTkwHlW1nqKbnC1NeVutlpfBu02Pd/U/lk/2jV61Hlj4eVVzL7T2a/Men/Jof5BXmXOZehY/jhZknmWeJFi3wvuEkgYAxkDK5U9VOCMg5BxyxkrWIaTLmdne0V1q2ePapbZtba7j2SmXKXXEwGzHHtZeFz61aqnClFeXHT/AIgauZooX0R43lQPhvTMqMHfkCyJ7h2q2ARllwTzxp4UY5ZeNOXqtOvJbuyt7iWEwSTRJI8DZ3Rs6hihyFOVPLpWMuiJWaJKBQKBQKBQKBQKBQKBQKBQKBQKBQKBQKBQYp6Dj9rh/Y0x/wCaL7VK4vqP8M+zO75MvD5r5SYefuyg3Z7wGBnmcZx5f1/HlWlNiqqMxTOF4t1y2giknkEcfNjk82CjAGSSScDAGTzqaOnqqr04Ioq1YTrpd4xwoQ9Me+x4O4kAA7uZO09K1+yq4W8Kcc7o0tZHVWBA3CRsZ57Yl3E/EcED2g1S30tVfCIonTlpw23Kqe+F8bQneOT4Y65/rpVa7E0zG2c9lZpq2928ls64wQ+ZGiXYd2Su3p5g7xirVdNNPO8T2TNOPdDmueI2ypD0vYTnLefsw/6yV7v0b19nX0/q9XXuOmXwTtMf7f1P5ZP9q1etb8sfDyquZfbOzn5l0/5NF/IK8u5zL0LH8cOZ2q062eewu3twdskkV1dhIi0Vq9tcBmd5hs4Sl9xDZX2E8iieU1RwoaYYpLtZNavorqNbeYW7XccASdW/Kz2zcGIrHwkO8bm5Nz7gR5LTupEYecu4+y3AurpLu2S+RNRezt44tP8AR9sE+2FChhLMZVCFOpI3bT52ipSaX0jS/c4WUZ03g+g8+D6Nt4XNju28Pu82z8/trGXRC5SFmaBQKBQKBQKBQKBQKBQKBQKBQKBQKBQKBQYp6Dj9sOWiT/tRfapXD9S/gqZXf45eD3V8xMYo+XAuW93dC32wXEyyB1VIkc94Pk90D2jn8ddlvxZt/jnMNabdXepZt7iVtWyjtPJFFIgO5m3usJ3bWDZwXzjBBrWiLkdRmfRaInxfVa40ss0TysnDS4tikpblw0acklnd+hDD1jnw8K6IqnO+NMcNYzn0Voru4ghhnV2jjW0dW293LNJLHHyGBkE5z7CayorxFNecRvn3UjVtV/VIbi5OtI8nvkPphjh399VxKudo5gYB5H6KiddPUxttPCPy1xPoqhiLG2htjvlnlkUsO6RvEY2KSR13DJ/6daaKptfjvyZ/Xdz91efMbRvvDn9Zeo7An329/Zh/1lr2/o0eZ1dN6vWV7UOqXwHtPIg7QaoDnPplx9q1erRV+MfDy6o3l9t7MnOhad8lh+zFeZc80vQseR0NoNUXOGKk0nCX6aZNLOwCicM0CgUCgUCgUCgUCgUCgUCgUCgUCgUCgUCgUGKDjdscnQ5+XLMRPxCVSelcfX0zVbmO7O5H44fP+NH+uv8AmFfN+FV2lwaZWE1m7jAVL11VegEuBj5jWkTejjUmJrju0l1OaYhpbouQCAWkzyYYI5nx8fOk+NM5nUfn7o/SF27eIu0nJG4YyM4P8arFNztUfljDLXe5FjaYGNM7F3jAz1wM1OK+04hGK8Y3bNqEjcPdcZ4X5LMnqfs8+XSn+3bzbH5+5BqElvngXHC3etsk25+PB50p8WnjUn8o42R8aP8AXX/MKpFqr9ZRpns9V/w+JL3rDmu2LveHIyffXs/SrddGc+rr6eMPX167ofMdZ7PW8uqXshjBL3ErE/G5NdEXpw5Ztbvedl/zDpvyWH7NaxueeW1nyOkKpC7NSkoFAoFAoFAoFAoFAoFAoFAoFAoFAoFAoFAoFAoFQNSopMRIbR5VGinsG0eVNFPYNo8qaKewbR5U0U9g2jypop7BtHlTRT2DaPKminsG0eVNFPZAEAqY2TEYZoPF6jcIL24HLlK/8xqf+VXouy/5g035JD9mtXueeVbPkdKqNGaBQKBQYzTIzQKBQKBQM0DNRkKkKBQKBQKBQKBQKBQKBQKBQMUCgUCgUCgUCgUCgUHw7tJrV7HrupIrd1bucD4hI1ddPTUzEOOb85fXuy/5g0z5JB9mtc1z+SW9r+N0qq1ZoFAoFBqKlSmWahcqMoKZCmQpkKZCmRmpSUCgUCgUCgUCgUCgUCgUCgUCgUCgUCgUCgUGquT9JH8cUAueXxig+B9p/wD6g1T5ZcfatXrW/LHw8qrmX//Z" alt=""/>
</div>
<div class="bd" id="b">
<img src="data:image/jpeg;base64,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" alt=""/>
</div>
</div>
<script src="13.自己封装的query1.0.0.3.js"></script>
<script>
//需求：点击右上角的x号时，先向下缓慢移动，再向右缓慢移动
//思路：获取x号，头部，底部对象，box盒子对象当点击x号时，
// 底部的高度缓速变成0,整个box宽度缓速变成0
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
var box = document.body.firstElementChild || document.body.firstChild;
var guanbi = box.children[0];
var hd = box.children[1];
var bd = box.children[2];
//2.绑定事件
guanbi.onclick = function () {
//3.书写事件驱动程序
animate(bd, {height: 0}, function () {
animate(box, {width: 0});
});
}
</script>
</body>
</html>