面向对象案例
面向对象设计思路:
面向对象的核心设计核心点: 对象(可以用this来代表) 对象是由一系列属性和方法的集合 对象的属性在constructor中定义 对象的方法在和constructor并列的位置 class Banner { constructor(ele) { this.属性名1 = 属性值; this.属性名2 = 属性值; } 方法名1(){} 方法名2(){} } 注意点: 1. 对象的属性和方法的访问需要通过this来访问 2. 方法体内部的this默认都是实例对象 3. new Banner()会自动触发和执行constructor函数 4. 方法体中如果有事件,this的指向会变化,如果想在事件中使用实例对象this。 要么将事件处理函数改为箭头函数 要么将this在事件外部存储一下,然后在事件内部使用外部存储的那个变量
放大镜做题思路: 1. 移入 显示 2. 移出 隐藏 3. 移动时 遮罩移动(边界限制) 鼠标到哪儿,遮罩到哪儿 大图跟着动(大图需要有绝对定位) 细节注意点: 1. 移入移出移动时需要移入移出移动到那个小盒子的区域, 如果不这样做的话,移出时移动到大盒子上遮罩也不会消失 2. 给遮罩设置left的时候,由于遮罩的left是相对于具有定位的父级元素来进行的,所以 omask.style.left = 光标的位置 - box的左偏移量 3. 遮罩的宽度设计是有讲究的:/*** mask的宽 / box的宽 = big的宽 / bImg的宽 ***/ 4. 图片可以运动的最大距离/遮罩运动的最大距离=图片移动的位置/遮罩的左偏移量
若有收获,就点个赞吧