一、面向对象
面向对象是一种代码的开发方式，是我们写代码的一种思想
1、变成思想
1-1面向过程：在开发过程中，关注每一个步骤，顺序，细节...
1-2面向对象：在开发过程中，找到一个能帮我们完成功能的对象
2、【例如】分别用面向过程和面向对象实现同一个效果
2-1面向过程：
-----------------------数组中元素x首次出现的位置-------------------
===>获取数组
===>遍历数组
===>判断数组元素中是否包含x
===>如果包含，找到遍历的索引i，并终止循环
===>如果不包含,返回-1
2-2面向对象：
-----------------------数组中元素x首次出现的位置-------------------
===>对象 arr（var arr = new Array()）
===>indexOf方法
===>找到下标
3、面向对象是面向过程的高度封装，核心思想：高内聚，低耦合（代码以最少的方式，实现最多的功能）
二、基本对象
1、类
概念：就是分类，类型，数据类型，包括了很多信息的数据类型。如：人，猪，狗等等。
等价于我们的Number，Boolean，String等等。
官方提供了哪些类？Array，Date，RegExp等等。
2、对象
概念：就是变量，是类的实例，即类的一个示例，类的一个举例说明。如：诸葛亮是人的一个示例，大黄是狗的一个举例说明。
我们在实际开发中，会定义若干个自定义类型（类），然后，再根据类来定义变量
关系：类是对象的抽象，对象是类的具体实例，通过类可以实例化出一个对象
3、创建对象
3-1 字面量法 （创建的是对象）
var a={"name":"nihao"};
console.log(a);3-2 Object法
对象实例化 (没对象可以new一个不)
var a = new Object();
3-3 构造函数 (创建的是函数对象）ES3提出
var a=function(name){
this.name=name;
};
var b= new a("nihao");
console.log(b);语法：
function Obj(name,age){
this.name = name
this.age = age
}
构造函数的this帮我们做了：
1.创建一个新对象；
2.将构造函数的作用域赋给新对象(因此this就指向了这个新对象)；
3.执行构造函数中的代码；
4.返回新对象3-4 类的方式 (ES6提出)
<body>
<div class="box1"></div>
</body>
</html>
<script>
class Box {
//1、写属性
constructor(ele) {
this.ele = ele;
this.bindEvents();
}
//2、写绑定的事件
bindEvents() {
//如点击事件
this.ele.onclick = ()=>{
this.fn1();
}
//鼠标移入事件
this.ele.mouseover = ()=>{
this.fn2();
}
//鼠标移出事件
this.ele.mouseout = ()=>{
this.fn3();
}
}
//3、写方法
fn1() {
this.ele.XXX = ''
}
fn2() {
this.ele.XXX = ''
}
fn3() {
this.ele.XXX = ''
}
}
var oBox = document.querySelector('.box1')
new Box(oBox);
</script> (1) 通过class 关键字创建类，类名我们还是习惯性定义首字母大写
(2) 类里面有个constructor函数,可以接受传递过来的参数，同时返回实例对象
(3) constructor 函数只要new 生成实例时,就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数 constructor(){}
(4) constructor函数内部的this指的是创建出来的对象本身
(5) 生成实例new不能省略
(6) 最后注意语法规范，创建类类名后面不要加小括号，生成实例类名后面加小括号，构造函数不需要加function
【方法】
(1) 我们类里面所有的函数不需要写function
(2) 多个函数方法之间不需要添加逗号分隔
三、放大镜
思路分析：
1、首先写出固定的页面布局 如图
2、隐藏mask(遮罩)，大图在bigBox中超出部分隐藏
3、隐藏bigBox
以上三步代码示例
<style>
/* 大盒子 */
#box{
width: 350px;
height: 350px;
border:1px solid #000;
position: relative;
}
/* 小图的窗口 */
#smallbox{
width: 350px;
height: 350px;
position: absolute;
top: 0;
left: 0;
}
/* 遮罩 */
#mask{
width: 175px;
height: 175px;
background-color: rgba(255, 255, 0, 0.4);
position:absolute;
top: 0;
left: 0;
display: none;
cursor: move;
}
/* 大图的窗口 */
#bigbox{
width: 400px;
height: 400px;
border: 1px solid red;
overflow: hidden;
position: absolute;
top: 0;
left: 360px;
display: none;
}
/* 给大图定位 可以移动*/
#bigbox img{
position: absolute;
}
</style>
<body>
<div id="box">
<div id="smallbox">
<img src="./img/001.jpg" alt="">
<div id="mask"></div>
</div>
<div id="bigbox">
<img src="./img/0001.jpg" alt="">
</div>
</div>
</body>4、动态效果思路分析
4-1 鼠标移入smallBox时，显示mask 显示bigBox
4-2 鼠标移出smallBox时，隐藏mask 隐藏bigBox
4-3 鼠标在smallBox中移动时，mask跟随鼠标移动且鼠标在mask的中心位置，同时显示bigImg在bigBox中等比例移动(mask移动，bigImg移动)
4-4 限制mask在smallBox中的移动边界
4-5 计算比例，根据比例移动bigImg
<script>
class Enlarge{
//写属性 constructor(ele){ }
constructor(ele){
this.box = ele; //box
this.smallBox = this.box.children[0]
this.mask = this.smallBox.children[1]
this.bigBox = this.box.children[1]
this.bigImg = this.bigBox.children[0]
this.bindEvents();
}
//bindEvents(){ } 绑定的事件
bindEvents(){
//鼠标移入smallBox 显示mask 显示bigBox
this.smallBox.onmouseover = () =>{
this.show();
}
//鼠标移出smallBox 隐藏mask 隐藏bigBox
this.smallBox.onmouseout = () =>{
this.hide()
}
//鼠标在smallBox中移动 mask跟随鼠标且鼠标在mask的中心位置，同时显示bigImg在bigBox中等比例移动
this.smallBox.onmousemove = (e) =>{
var ev = e || event;
//遮罩移动
this.maskMove(ev);
//bigImg移动
this.bigImgMove();
}
}
//写方法
//显示
show(){
this.mask.style.display = 'block'
this.bigBox.style.display = 'block'
}
//隐藏
hide(){
this.mask.style.display = 'none'
this.bigBox.style.display = 'none'
}
//mask移动
maskMove(ev){
//确定光标位置
var x = ev.clientX - this.box.offsetLeft - this.mask.offsetWidth / 2;
var y = ev.clientY - this.box.offsetTop - this.mask.offsetHeight / 2;
//边界限制
if (x <= 0) {
x = 0;
}
if (x >= this.box.offsetWidth - this.mask.offsetWidth) {
x = this.box.offsetWidth - this.mask.offsetWidth;
}
if (y <= 0) {
y = 0;
}
if (y >= this.box.offsetHeight - this.mask.offsetHeight) {
y = this.box.offsetHeight - this.mask.offsetHeight
}
//mask左偏移量和上偏移量
this.mask.style.left = x + 'px'
this.mask.style.top = y +'px'
}
//bigImg的移动
bigImgMove(){
//x轴y轴移动比例
var lix = (this.bigImg.offsetWidth - this.bigBox.clientWidth) / (this.smallBox.clientWidth - this.mask.offsetWidth);
var liy = (this.bigImg.offsetHeight - this.bigBox.clientHeight) / (this.smallBox.clientHeight - this.mask.offsetHeight)
//大图应该移动的距离
this.bigImg.style.left = - lix * this.mask.offsetLeft + 'px';
this.bigImg.style.top = - liy * this.mask.offsetTop + 'px';
}
}
var oBox = document.querySelector('#box')
new Enlarge(oBox)
</script>【大图移动比例公式】
公式：大图应该移动的距离 / 遮罩移动的距离 = 大图剩余可移动的距离 / 遮罩剩余可移动的距离
可转为：大图应该移动的距离 = 大图剩余可移动的距离 / 遮罩剩余可移动的距离 * 遮罩移动的距离
以X轴为例
1、大图剩余可移动的距离：this.bigImg.offsetWidth - this.bigBox.clientWidth
2、遮罩剩余可移动的距离：this.smallBox.clientWidth - this.mask.offsetWidth
3、遮罩移动的距离：this.mask.offsetLeft
=========大图在X轴的移动 moveX=========
moveX = - (this.bigImg.offsetWidth - this.bigBox.clientWidth) / (this.smallBox.clientWidth - this.mask.offsetWidth) * this.mask.offsetLeft
=========大图在Y轴的移动 moveY=========
moveY = - (this.bigImg.offsetHeight - this.bigBox.clientHeight) / (this.smallBox.clientHeight - this.mask.offsetHeight) * his.mask.offsetTop
【注】由于大图是向上和向左移动的，所以式前需要加一个负号 ‘-’
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
