day19-面向对象3

土豆沙发

于 2021-04-01 14:11:19 发布

阅读量75

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/kuangjianming/article/details/115364040

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

使用class定义函数

        <script>
            // let fun = function(a){};

            // fn();
            // function fn(a) {
            //     console.log(2);
            // }

            // class 定义函数  用class 来代替function
            // 【1】class 定义的函数 一定是 构造函数 必须使用new 关键字来调用
            // 【2】函数中 必须有一个方法 叫做 constructor ,这个方法就是 用来写静态属性 接收构造函数 传递的参数
            // 【3】用class定义的函数 必须先定义后调用，不能在定义之前调用
            // let Fun = class {
            //     constructor(a) {
            //         this.name = a;
            //         console.log(this);
            //     }
            //     // 在跟constructor 函数同级的位置 写的方法为 构造函数原型对象上的方法
            //     init() {}
            //     move() {}
            // };

            // new Fun("aa");
            class Fun {
                constructor(a) {
                    this.name = a;
                    console.log(this);
                }
                init() {}
                move() {}
            }

            new Fun("aa");
        </script>

放大镜案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 2000px;
        }

        .box {
            width: 450px;
            margin: 50px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .box>.show {
            width: 420px;
            height: 430px;
            border: 1px solid #333;
            position: relative;
            text-align: center;
        }

        .box>.show>img {
            width: 100%;
            height: 100%;
        }

        .box>.show>.mask {
            width: 150px;
            height: 150px;
            background-color: yellow;
            opacity: 0.4;
            position: absolute;
            top: 0px;
            left: 0px;

            display: none;
        }

        .box>.list {
            width: 100%;
            flex: 1;

            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding: 20px;
        }

        .box>.list>p {
            width: 60px;
            height: 60px;
            border: 2px solid #333;
            margin-right: 10px;
            text-align: center;
        }

        .box>.list>p.active {
            border-color: red;
        }

        .box>.enlarge {
            /* 容器 与背景图的比例为 1 ：2 */
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0px;
            left: 450px;
            background-size: 750px 1000px;
            background-position: 0 0;
            background-repeat: no-repeat;
            border: 1px solid #ccc;
            background-image: url(./images/img1_750x1000.jpg);
            display: none;
        }
    </style>
    <script src="./enlarge.js"></script>
</head>

<body>
    <div class="box">
        <div class="show">
            <img src="./images/img1_430x430.jpg" />
            <div class="mask"></div>
        </div>
        <div class="list">
            <p class="active">
                <img midelImg="./images/img1_430x430.jpg" bigImg="./images/img1_750x1000.jpg"
                    src="./images/img1_60x60.jpg" />
            </p>
            <p>
                <img midelImg="./images/img2_430x430.jpg" bigImg="./images/img2_750x1000.jpg"
                    src="./images/img2_60x60.jpg" />
            </p>
            <p>
                <img midelImg="./images/img3_430x430.jpg" bigImg="./images/img3_750x1000.jpg"
                    src="./images/img3_60x60.jpg" />
            </p>
            <p>
                <img midelImg="./images/img4_430x430.jpg" bigImg="./images/img4_750x1000.jpg"
                    src="./images/img4_60x60.jpg" />
            </p>
            <p>
                <img midelImg="./images/img5_430x430.jpg" bigImg="./images/img5_750x1000.jpg"
                    src="./images/img5_60x60.jpg" />
            </p>
        </div>
        <div class="enlarge"></div>
    </div>
    <script>
        /*
                【1】放大镜的盒子的大小需要动态设置的，根据show盒子 show中mask遮罩层 和 放大镜的背景图来决定
                    show       放大镜的背景图
                    ----- === -----------------
                    mask        放大镜盒子的宽度

                    mask盒子的大小/show盒子的大小 = 放大镜盒子的大小/放大镜背景图的大小
                【1】创建对象  class Enlarge{}
                【2】描述对象
                    静态属性描述：
                        页面中存在的元素（需要做放大镜功能的容器）
                    动态方法描述：
                        init() 初始化，一般获取元素 绑定事件，创建
                        setStyle() 设置放大镜的宽高
                        move()  移动mask盒子，enlarge中的背景图也要跟着移动
                        changeImg() 点击小图片的时候切换show盒子和放大镜盒子的图片
                【3】使用放大镜
                    new Enlarge('.box')
            */

        new Enlarge(".box");
    </script>
</body>
</html>

下面是js代码

class Enlarge{
    constructor(ele){
         this.ele=document.querySelector(ele);
         this.init();
    }
    init(){
         this.show=this.ele.querySelector(".show");
         this.showImg = this.show.querySelector("img");
         this.mask = this.show.querySelector(".mask");
         this.list = this.ele.querySelector(".list");
         this.p = this.list.querySelectorAll("p");
         this.enlarge = this.ele.querySelector(".enlarge");
         //给show盒子绑定鼠标移入事件
         this.show.onmousemove=()=>{
             this.mask.style.display="block";
             this.enlarge.style.display="block";
             //设置 放大镜盒子的宽高
             this.setStyle();
         }
         //鼠标移出show盒子的时候 隐藏 mask 和 enlarge
         this.show.onmouseout=()=>{
             this.mask.style.display="none";
             this.enlarge.style.display="none";
         };
         //绑定shouw盒子中的移动事件
         this.show.onmousemove=()=>{
             let e=window.event;
             //光标在show盒子上的坐标轴
             //e.offsetX得到的是光标在mask盒子上的坐标轴
             //let x=e.offsetX;
             //let y=0;
             this.move(e);
         }
         this.p.forEach((item,index)=>{
             item.onclick=()=>{
                this.changeImg(item);
             }
         })
    },
    setStyle(){
        // mask盒子的大小/show盒子的大小 = 放大镜盒子的大小/放大镜背景图的大小
        // 放大镜大宽度 = 放大镜背景图的宽度 * mask盒子的宽度 / show盒子的宽度
        // '750px 1000px'  拿到750   1000
        let style=window.getComputedStyle(this.enlarge).backgroundSize;
        let bgx=parseInt(style.split("")[0]);
        let bgy=parseInt(style.split("")[1]);
        let maskW = this.mask.offsetWidth;
        let maskH = this.mask.offsetHeight;

        let showW = this.show.offsetWidth;
        let showH = this.show.offsetHeight;

        let width = (bgx * maskW) / showW;
        let height = (bgy * maskH) / showH;

        this.enlarge.style.width = width + "px";
        this.enlarge.style.height = height + "px";
    }
    move(e){
        let x=e.pageX-this.ele.offsetLeft-this.mask.offsetWidth/2;
        let y=e.pageY-this.ele.offsetTop-this.mask.offsetHeight/2;
        if(x<=0){
            x=0;
        }
        if(y<=0){
            y=0;
        }
        if (x >= this.show.offsetWidth - this.mask.offsetWidth) {
            x = this.show.offsetWidth - this.mask.offsetWidth;
        }
        if (y >= this.show.offsetHeight - this.mask.offsetHeight) {
            y = this.show.offsetHeight - this.mask.offsetHeight;
        }
        this.mask.style.left = x + "px";
        this.mask.style.top = y + "px";
                // mask盒子移动的距 / show 盒子的大小 == 背景图移动的距离 / 背景图的大小
        // 背景图移动的距 = 背景图的大小 * mask盒子移动距离 / show盒子的大小
        // 背景图移动的距离 写在 background-postion:x y
        // background-postion 的取值 往左和往上移动 值为负数
        let style = window.getComputedStyle(this.enlarge).backgroundSize;
        let bgx = parseInt(style.split(" ")[0]);
        let bgy = parseInt(style.split(" ")[1]);

        let bpx = (bgx * x) / this.show.offsetWidth;
        let bpy = (bgy * y) / this.show.offsetHeight;

        // 设置background-position的属性
        this.enlarge.style.backgroundPosition = `${-bpx}px ${-bpy}px`;
    }
    changeImg(ele){
        for(let i=0;i<this.p.length;i++){
             this.p[i].classList.remove("active");
        }
        ele.classList.add("active");
        let img=ele.querySelector("img");
        //改变show盒子中 img标签的图片路径
        this.showImg.setAttribute("src",img.getAttribute("mideling"));
        //改变放大镜的背景图
        this.enlarge.style.backgroundImage=`url(${img.getAttribute("bigImg")})`;
    }
    
}

土豆沙发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day19-面向对象3

使用class定义函数 <script> // let fun = function(a){}; // fn(); // function fn(a) { // console.log(2); // } // class 定义函数用class 来代替function // 【1】class 定义的函
复制链接

扫一扫

专栏目录