0714 NOTE

0714 NOTE

放大镜效果

/*css*/
 .zoomclass{
            position: relative;
        }
        .mini{
            width: 450px;
            height: 450px;
            position: relative;
            border: 1px solid #ccc;
            left: 100px;
            top:100px;
            background-size: 100% 100%;
        }
        .mask{
            background-color: rgba(255, 227, 68, 0.3);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .zoom{
            width: 540px;
            height: 540px;
            position: absolute;
           
            border: 1px solid #ccc;
            display: none;
           
        }

        .carousel{
            width: 450px;
            height: 58px;
            position: absolute;
        }
        .left,.right{
            width:22px;
            height: 32px;
            background-image: url(./img/__sprite.png);
            position: absolute;
            top:14px;
        }
        .left{
            background-position-x: 0px;
            background-position-y: -54px;
        }
        .right{
            background-position-x: -78px;
            background-position-y: 0;
            right: 0;
          
        }
        .maskCon{
            position: relative;
            width: 380px;
            height: 58px;

            margin:0px 36px;
            overflow: hidden;
        }
        .maskCon>.imgCon{
            position: absolute;
            left: 0;
            top:0;
            transition: all 0.5s;
        }
        .maskCon>.imgCon>img{
            width: 54px;
            height: 54px;
            border: 2px solid transparent;
            margin: 0px 9px;
        }

<div class="zoomclass">
        <div class="mini">
            <div class="mask"></div>
        </div>
        <div class="zoom"></div>
        <div class="carousel">
            <div class="left"></div>
            <div class="maskCon">
                <div class="imgCon"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>

  var arr=["a_icon.jpg","b_icon.jpg","c_icon.jpg","d_icon.jpg","e_icon.jpg","f_icon.jpg","g_icon.jpg","h_icon.jpg","i_icon.jpg","j_icon.jpg","a_icon.jpg","b_icon.jpg"];
        //声明数组，存入所有小图路径
        var mini,mask,zoom,prev,carousel,imgCon,left,right,ids;
        var loadBool=false,
            maskWidth=0,
            maskHeight=0,
            carouselX=0,
            x=0,
            y=0;
        init(); //函数式编程 ，函数执行
        function init(){
            mini=document.querySelector(".mini");       //获取class名为mini的元素 原图可视区域
            mask=document.querySelector(".mask");       //获取class名为mask的元素 放大镜遮罩块
            zoom=document.querySelector(".zoom");          //获取class名为zoom的元素 放大镜可视区域
            carousel=document.querySelector(".carousel");   //获取class名为carousel的元素 原图下方轮播图区域
            imgCon=document.querySelector(".imgCon");       //获取class名为imgCon的元素 轮播图中存放图片的盒子
            left=document.querySelector(".left");           //获取class名为leftn的元素 轮播图中左按钮
            right=document.querySelector(".right");         //获取class名为right的元素 轮播图中右按钮
            
           
            zoom.style.left=mini.offsetLeft+mini.offsetWidth+"px";      //zoom的css样式left属性值为：mini的距离父元素左侧的距离+left原图片的宽度
            zoom.style.top=mini.offsetTop+"px";                         //zoom的css样式top属性值为：mini的距离父元素顶的距离
            carousel.style.left=mini.offsetLeft+"px";                   //carousel的css样式left属性值为：mini的距离父元素左侧的距离
            carousel.style.top=mini.offsetTop+mini.offsetHeight+"px";   //carousel的css样式top属性值为：mini的距离父元素顶的距离+mini原图片本身高度
            mini.addEventListener("mouseenter",mouseHandler)            //mini添加事件侦听，鼠标移入事件
            mini.addEventListener("mouseleave",mouseHandler)            //mini添加事件侦听，鼠标移出事件

            createCarousel();   //执行函数createCarousel+
        }
        function createCarousel(){
            arr.forEach(item=>{   
                var img=new Image();
                img.src="./img/"+item;
                imgCon.appendChild(img);                //遍历arr每个元素，声明img为新的图片对象，将目标元素值组成地址存入img的src属性，并将img变量存入imgCon
            });
            imgCon.style.width=arr.length*76+"px"       //确定imgCon的完整宽度
            imgCon.addEventListener("mouseover",carouselMouseHandler);  //给imgCon添加事件侦听，鼠标移入事件
            var evt=new MouseEvent("mouseover",{bubbles:true});         //创建新的鼠标事件，需要冒泡
            imgCon.children[0].dispatchEvent(evt);                      //第一个子节点抛发事件，设为默认
            left.addEventListener("click",bnClickhandler);                  //添加事件
            right.addEventListener("click",bnClickhandler);                 //添加事件
        }

        function carouselMouseHandler(e){
            if(e.target.nodeName!=="IMG") return;       //如果目标对象节点名不是IMG，返回 不执行 
            if(prev){                                       //如果prev存在
                prev.style.borderColor="transparent";       //prev边框颜色透明
            }
            prev=e.target;                                    //将目标对象赋给prev
            prev.style.borderColor="#e53e41"                    //边框颜色设置赋予
            var index=Array.from(imgCon.children).indexOf(e.target);    //获取当前目标对象对应imgCon子节点的对应下标
            loadImage(arr[index].replace("_icon",""));              //调用loadImage函数，实现图片加载至指定区域
        }

        function loadImage(src){
            mini.style.backgroundImage=zoom.style.backgroundImage="url(./img/"+src+")";     //设置mini的背景图片和放大镜区域的背景图片为目标图片
            var img=new Image();                //声明新的图片对象，断开引用
            img.addEventListener("load",loadHandler);       //添加事件侦听，加载事件
            img.src="./img/"+src;                           //地址写入
        }

        function loadHandler(e){
            loadBool=true;          //加载事件触发时，loadbool变为true
            this.removeEventListener("load",loadHandler);       //事件删除
            maskWidth=540/this.width*450;                      
            maskHeight=540/this.height*450;                     //获取到遮罩层的宽度和高度存储到全局变量maskWidth和maskHeight中 方便其他函数的使用
            Object.assign(mask.style,{
                width:maskWidth+"px",
                height:maskHeight+"px",                         //遮罩层的宽高根据图片宽高和放大镜区域的宽高比进行设置
            })

        }

        function mouseHandler(e){
            if(!loadBool)return;            //图片加载完成时可以出发该事件
            if(e.type==="mouseenter"){          //鼠标进入时
                zoom.style.display=mask.style.display="block";      //变量mask和变量zoom样式改变，出现在页面中：display:none=>display:block
                mini.addEventListener("mousemove",mouseHandler);    //鼠标移入后，进行鼠标移动的事件监听
            }else if(e.type==="mouseleave"){        //鼠标离开时
                zoom.style.display=mask.style.display="none";       //鼠标离开时，变量样式改变，从页面中消失
                mini.removeEventListener("mousemove",mouseHandler);     //鼠标移开时，鼠标移动事件删除
            }else if(e.type==="mousemove"){         //鼠标在规定范围内移动时
                var rect=mini.getBoundingClientRect();      //声明变量rect，获取到mini盒子距离父元素的距离
                x=e.clientX-maskWidth/2-rect.x;             //x就等于鼠标的位置减去 mini距离左侧的宽度  因为要让鼠标位于遮罩层的中间，因此也需要减去遮罩层宽高的一半
                y=e.clientY-maskHeight/2-rect.y;            //y值作用同上
                if(x>450-maskWidth) x=450-maskWidth;        //因为有范围，遮罩层只能在mini区域内移动 因此需要判断 如果x的值大于了mini的宽度减去遮罩层的宽度 ，说明已经超出范围 需要把x设置为 mini的宽度减去遮罩层的宽度
                if(y>450-maskHeight) y=450-maskHeight;      //同上
                if(x<0) x=0;                                //如果x值小于0，则x置0
                if(y<0) y=0;                                   //y值小于0，置0
                mask.style.left=x+"px";                         //遮罩层的css样式left属性跟随x变化
                mask.style.top=y+"px";                          //遮罩层的css样式right属性跟随y变化
                var scaleX=540/maskWidth;                       //算出移动比例因为图片要在放大镜区域显示 因此比例应该是放大镜的宽高除以遮罩层的宽高
                var scaleY=540/maskHeight;                      //同上
                zoom.style.backgroundPositionX=-x*scaleX+"px";      //放大镜盒子的css样式left属性为x值乘比例，因为移动位置相反，乘负
                zoom.style.backgroundPositionY=-y*scaleY+"px";      //同上
            }
        }


        function bnClickhandler(e){
            if(ids) return;         //节流
            if(this===left){//点击按钮是左
                carouselX-=380;//轮播图移动宽度一次性移动380px
                if(carouselX<0) carouselX=0;//如果宽度小于了0 说明左边没有图片了已经 将置零
            }else{//点击按钮是右
                carouselX+=380//轮播图移动宽度还是一次性移动380px 
                if(carouselX>=imgCon.offsetWidth-380) carouselX=imgCon.offsetWidth-380;
                //要判断最后剩余的图片所占的宽度，如果最后的宽度大于了 轮播图区域的宽度减去380 说明后面已经没有图片了 ，就设置为轮播图的宽度减去380，就可以显示最后几张图片 不会出现后面有空白
            }
          
          
            imgCon.style.left=-carouselX+"px"//将轮播图的定位位置left设置为图片移动宽度
            setTimeout(function(){
                clearTimeout(ids);
                ids=undefined;
            },500)
        }

原位置实现放大镜效果

/*css*/
.zoomclass{
            position: relative;
        }
        .mini{
            width: 450px;
            height: 450px;
            position: absolute;
            border: 1px solid #ccc;
          
            background-size: 100% 100%;
        }
        .mask{
            background-color: rgba(255, 227, 68, 0.3);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .zoom{
            width: 540px;
            height: 540px;
            position: absolute;
            left: 452px;
            top: 0;
            border: 1px solid #ccc;
            display: none;
           
        }

<div class="zoomclass">
        <div class="mini">
            <div class="mask"></div>
        </div>
        <div class="zoom"></div>
    </div>

 var arr=["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg","f.jpg","g.jpg","h.jpg","i.jpg","j.jpg"];
        var mini,mask,zoom;
        var loadBool=false,
            imgWidth=0,
            imgHeight=0,
            x=0,
            y=0;
        init();
        function init(){
            mini=document.querySelector(".mini");
            mask=document.querySelector(".mask");
            zoom=document.querySelector(".zoom");
            loadImage(arr[0]);
            mini.addEventListener("mouseenter",mouseHandler)
            mini.addEventListener("mouseleave",mouseHandler)
        }

        function loadImage(src){
            mini.style.backgroundImage=zoom.style.backgroundImage="url(./img/"+src+")";
            var img=new Image();
            img.addEventListener("load",loadHandler);
            img.src="./img/"+src;
        }

        function loadHandler(e){
            loadBool=true;
            this.removeEventListener("load",loadHandler);
            imgWidth=this.width;
            imgHeight=this.height;
        }

        function mouseHandler(e){
            if(!loadBool)return;
            if(e.type==="mouseenter"){
                mini.style.backgroundSize="auto";
                mini.addEventListener("mousemove",mouseHandler);
            }else if(e.type==="mouseleave"){
                mini.style.backgroundSize="100% 100%";
                mini.style.backgroundPositionX="0px"
                mini.style.backgroundPositionY="0px"
                mini.removeEventListener("mousemove",mouseHandler);
            }else if(e.type==="mousemove"){
                var scaleX=(imgWidth-450)/450;
                var scaleY=(imgHeight-450)/450;
                mini.style.backgroundPositionX=-e.clientX*scaleX+"px";
                mini.style.backgroundPositionY=-e.clientY*scaleY+"px";
            }
        }

面向对象放大镜效果

 "use strict"
// import Zoom from "./js/Zoom.js";

        // var zoom=new Zoom("./img/a.jpg",false);
        // zoom.appendTo("body");
        import CarouselZoom from "./js/CarouselZoom.js";

        var arr=[];
        for(var i=97;i<107;i++){
            arr.push("./img/"+String.fromCharCode(i)+"_icon.jpg");
        }

        var carouselZoom=new CarouselZoom(arr);
        carouselZoom.appendTo("body");

/*CarouselZoom.js*/
import Component from "./Component.js";
import Zoom from "./Zoom.js";
import Utils from "./Utils.js";

export default class CarouselZoom extends Component{
    carousel;
    imgCon;
    left;
    right;
    prev;
    arr=[];
    zoom;
    ids;
    carouselX=0;
    constructor(arr){
        super();
        this.elem.innerHTML=`
            <div class="carousel">
                <div class="left"></div>
                <div class="maskCon">
                    <div class="imgCon"></div>
                </div>
                <div class="right"></div>
            </div>
        `
        this.elem.style.position="relative"
        this.zoom=new Zoom();
       
        CarouselZoom.setCss();
        this.carousel=this.elem.querySelector(".carousel");
        this.imgCon=this.elem.querySelector(".imgCon");
        this.left=this.elem.querySelector(".left");
        this.right=this.elem.querySelector(".right");
        if(arr && arr.length>0) this.setData(arr);
    }
    appendTo(parent){
        super.appendTo(parent);
        this.zoom.insertTo(this.elem,this.elem.firstElementChild);
    }
    setData(arr){
        this.imgCon.innerHTML="";
        this.arr=arr;
        arr.forEach(item=>{
            var img=new Image();
            img.src=item;
            this.imgCon.appendChild(img);
        });
        this.imgCon.style.width=arr.length*76+"px"
        this.imgCon.addEventListener("mouseover",e=>this.carouselMouseHandler(e));
        var evt=new MouseEvent("mouseover",{bubbles:true});
        this.imgCon.children[0].dispatchEvent(evt);
        this.left.addEventListener("click",e=>this.bnClickhandler(e));
        this.right.addEventListener("click",e=>this.bnClickhandler(e));
    }
    carouselMouseHandler(e){
        if(e.target.nodeName!=="IMG") return;
            if(this.prev){
                this.prev.style.borderColor="transparent";
            }
            this.prev=e.target;
            this.prev.style.borderColor="#e53e41"
            var index=Array.from(this.imgCon.children).indexOf(e.target);
            this.zoom.setImage(this.arr[index].replace("_icon",""));
    }
    bnClickhandler(e){
        if(this.ids) return;
        if(e.currentTarget===this.left){
            this.carouselX-=380;
            if(this.carouselX<0) this.carouselX=0;
        }else{
            this.carouselX+=380
            if(this.carouselX>=this.imgCon.offsetWidth-380) this.carouselX=this.imgCon.offsetWidth-380;
        }
      
        this.imgCon.style.left=-this.carouselX+"px"
        setTimeout(()=>{
            clearTimeout(this.ids);
            this.ids=undefined;
        },500)
    }
    static setCss(){
        if(super.setCss()) return ;
        Utils.setCss(`.carousel{
            width: 450px;
            height: 58px;
            position: absolute;
        }
        .left,.right{
            width:22px;
            height: 32px;
            background-image: url(./img/__sprite.png);
            position: absolute;
            top:14px;
        }
        .left{
            background-position-x: 0px;
            background-position-y: -54px;
        }
        .right{
            background-position-x: -78px;
            background-position-y: 0;
            right: 0;
          
        }
        .maskCon{
            position: relative;
            width: 380px;
            height: 58px;

            margin:0px 36px;
            overflow: hidden;
        }
        .maskCon>.imgCon{
            position: absolute;
            left: 0;
            top:0;
            transition: all 0.5s;
        }
        .maskCon>.imgCon>img{
            width: 54px;
            height: 54px;
            border: 2px solid transparent;
            margin: 0px 9px;
        }`)
    }
}

/*Zoom.js*/
import Component from "./Component.js";
import Utils from "./Utils.js";

export default class Zoom extends Component {
    origin = false;
    loadBool = false;
    width = 0;
    height = 0;
    x = 0;
    y = 0;
    static WIDTH = 450;
    static HEIGHT = 450;
    static ZOOM_WIDTH = 540;
    static ZOOM_HEIGHT = 540;
    constructor(src, origin = false) {
        super();
        this.origin = origin;
        Zoom.setCss();
        this.mouseFn = e => this.mouseHandler(e);
        var elem;
        if (!origin) {
            this.elem.innerHTML = `
                <div class="mini">
                    <div class="mask"></div>
                </div>
                <div class="zoom"></div>
             `;
            this.mini = this.elem.querySelector(".mini");
            this.mask = this.elem.querySelector(".mask");
            this.zoom = this.elem.querySelector(".zoom");
            this.zoom.style.width = Zoom.ZOOM_WIDTH + "px";
            this.zoom.style.height = Zoom.ZOOM_HEIGHT + "px";
            elem = this.mini;
        } else {
            elem = this.elem;
            this.elem.className = 'zoomOrigin';
        }
        elem.style.width = Zoom.WIDTH + "px";
        elem.style.height = Zoom.HEIGHT + "px";
        elem.addEventListener("mouseenter", this.mouseFn)
        elem.addEventListener("mouseleave", this.mouseFn)
        if (src && src.toString().trim().length !== 0) this.setImage(src);
    }
    insertTo(parent,before=undefined) {
        super.insertTo(parent,before);
        if (!this.origin) {
            this.zoom.style.left = this.mini.offsetLeft + this.mini.offsetWidth + "px";
            this.zoom.style.top = this.mini.offsetTop + "px";
        }
    }
    appendTo(parent){
        super.appendTo(parent);
        if (!this.origin) {
            this.zoom.style.left = this.mini.offsetLeft + this.mini.offsetWidth + "px";
            this.zoom.style.top = this.mini.offsetTop + "px";
        }
    }

    mouseHandler(e) {
        if (!this.loadBool) return;
        if (e.type === "mouseenter") {
      
            if (this.origin) {
                this.elem.style.backgroundSize = "auto";
                this.elem.addEventListener("mousemove", this.mouseFn);
            } else {
                this.zoom.style.display = this.mask.style.display = "block";
                this.mini.addEventListener("mousemove", this.mouseFn);
            }
        } else if (e.type === "mouseleave") {
           
            if (this.origin) {
                this.elem.style.backgroundSize = "100% 100%";
                this.elem.style.backgroundPositionX = "0px"
                this.elem.style.backgroundPositionY = "0px"
            } else this.zoom.style.display = this.mask.style.display = "none";
            e.currentTarget.removeEventListener("mousemove", this.mouseFn);
        } else if (e.type === "mousemove") {
            this.x = e.clientX - (this.origin ? 0 : this.width / 2 + this.mini.getBoundingClientRect().x);
            this.y = e.clientY - (this.origin ? 0 : this.height / 2 + this.mini.getBoundingClientRect().y);
            if (!this.origin) {
                if (this.x > Zoom.WIDTH - this.width) this.x = Zoom.WIDTH - this.width;
                if (this.y > Zoom.HEIGHT - this.height) this.y = Zoom.HEIGHT - this.height;
                if (this.x < 0) this.x = 0;
                if (this.y < 0) this.y = 0;
                this.mask.style.left = this.x + "px";
                this.mask.style.top = this.y + "px";
            }
            var scaleX = this.origin ? (this.width - Zoom.WIDTH) / Zoom.WIDTH : Zoom.ZOOM_WIDTH / this.width;
            var scaleY = this.origin ? (this.height - Zoom.HEIGHT) / Zoom.HEIGHT : Zoom.ZOOM_HEIGHT / this.height;
            var elem = this.origin ? this.elem : this.zoom;
            elem.style.backgroundPositionX = -this.x * scaleX + "px";
            elem.style.backgroundPositionY = -this.y * scaleY + "px";
        }
    }

    setImage(src) {
        if (!this.origin) this.mini.style.backgroundImage = this.zoom.style.backgroundImage = "url(" + src + ")";
        else this.elem.style.backgroundImage = "url(" + src + ")";
        if (this.loadBool) return;
        this.loadBool = false;
        var img = new Image();
        this.loadFn = e => this.loadHandler(e);
        img.addEventListener("load", this.loadFn);
        img.src = src;
    }

    loadHandler(e) {
        this.loadBool = true;
        e.currentTarget.removeEventListener("load", this.loadFn);
        this.width = this.origin ? e.currentTarget.width : Zoom.ZOOM_WIDTH / e.currentTarget.width * Zoom.WIDTH;
        this.height = this.origin ? e.currentTarget.height : Zoom.ZOOM_HEIGHT / e.currentTarget.height * Zoom.HEIGHT;
        if (!this.origin)
            Object.assign(this.mask.style, {
                width: this.width + "px",
                height: this.height + "px",
            })
    }
    static setCss() {
        if (super.setCss()) return;
        Utils.setCss(`
      
        .mini,.zoomOrigin{  
            position: relative;
            border: 1px solid #ccc;
            background-size: 100% 100%;
        }
        .mask{
            background-color: rgba(255, 227, 68, 0.3);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .zoom{
            position: absolute;
            border: 1px solid #ccc;
            display: none;
           
        }
        `);
    }
}

StepNumber

 import StepNumber from "./js/StepNumber.js";

        var list=[];
        for(var i=0;i<10;i++){
            let step=new StepNumber();
            step.addEventListener("change",changeHandler);
            step.appendTo("body");
            list.push(step);
        }


        function changeHandler(e){
            // console.log("aaa");
            var index=list.indexOf(this);
            console.log(index,e.step);
        }

import Component from "./Component.js";
import Utils from "./Utils.js";

export default class StepNumber extends Component{
    input;
    ids;
    step=1;
    constructor() {
        super();
        this.elem.innerHTML=`
            <div disabled>-</div>
            <input type='text' value="1">
            <div>+</div>
        `;
        this.elem.className="stepnumber";
        this.input=this.elem.querySelector("input");
        this.elem.addEventListener("click",e=>this.clickHandler(e));
        this.input.addEventListener("input",e=>this.inputHandler(e));
        StepNumber.setCss();
    }

    clickHandler(e) {
        if(e.target.nodeName==="INPUT" || e.target===e.currentTarget) return;
        if(e.target.textContent==="-"){
            // console.log(this.step);
            this.setStep(this.step-1);
            console.log(this.step);
        }else{
            // console.log(this.step);
            this.setStep(this.step+1);
            // console.log(this.step);
        }
        console.log(this);
        this.dispatch()
    }

    inputHandler(e){
        this.input.value=this.input.value.replace(/\D/g,"");
        // console.log("aaa");
        if(this.ids) return;
        // console.log(this.ids);
        // console.log("aaa");
        this.ids=setTimeout(()=>{
            console.log("a:"+this.ids);
            clearTimeout(this.ids);
            this.ids=undefined;
            console.log("c"+this.ids);
            this.setStep(this.input.value);
            this.dispatch();
        },500);
       
    }

    dispatch(){
        var evt=new Event("change");
        evt.step=this.step;
        this.dispatchEvent(evt);
    }
    setStep(_step){
        _step=String(_step).replace(/\D/g,"");
        _step=~~_step;
        this.elem.querySelectorAll("[disabled]").forEach(item=>{
            item.removeAttribute("disabled");
        })
        if(!_step) _step=1;
        if(_step>99) _step=99;
        if(_step===1) this.elem.firstElementChild.setAttribute("disabled","");
        if(_step===99) this.elem.lastElementChild.setAttribute("disabled",""); 
        this.step=_step;
        this.input.value=_step;
    }
    static setCss(){
        if(super.setCss()) return;
        Utils.setCss(`.stepnumber{
            width: 84px;
            height: 22px;
            position: relative;
        }
        .stepnumber>div{
            width: 17px;
            height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            font-size: 14px;
            line-height: 20px;
            float: left;
            user-select: none;
        }
        .stepnumber>input{
            float: left;
            width: 42px;
            height: 18px;
            border: none;
            text-align: center;
            outline: none;
            border-top: 1px solid #CCC;
            border-bottom: 1px solid #CCC;
        }
        .stepnumber>div[disabled]{
            color: #CCC;
            cursor: not-allowed;
        }`)
    }

}