JS 商品放大镜

最新推荐文章于 2024-03-04 11:31:57 发布

甘乐2333

最新推荐文章于 2024-03-04 11:31:57 发布

阅读量228

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35254240/article/details/91469645

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

//Utils1.js
var Utils=(function () {
    return {
        //SSS
        loadImg:function (srcList,callBack) {
            var img=new Image();
            img.num=0;
            img.imgList=[];
            img.srcList=srcList;
            img.callBack=callBack;
            img.addEventListener("load",this.loadHandler);
            img.src="./img/"+srcList[img.num];

        },
        loadHandler:function (e) {
            // console.log(this.num);
            // console.log(this.imgList);
            // console.log(this.callBack);
            this.imgList.push(this.cloneNode(false));
            this.num++;
            if(this.num>=this.srcList.length){
                this.callBack(this.imgList);
                return;
            }
            //事件侦听没有被删除,只需更改src,加载后仍然触发了该事件,进入该函数
            this.src="./img/"+this.srcList[this.num];
        },
        ce:function (type,style) {
            var elem=document.createElement(type);
            Object.assign(elem.style,style);
            return elem;
        },
        randomColor:function () {
            var col="#";
            for(var i=0;i<6;i++){
                col+=Math.floor(Math.random()*16).toString(16);
            }
            return col;
        }
    }
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Utils1.js"></script>
</head>
<body>
<button>图1</button>
<button>图2</button>
<button>图3</button>
<button>图4</button>
<button>图5</button>
<button>图6</button>
    <script>
        /*
        *  
        *  1\创建一个缩略图div,里面创建半透的小DIV(隐藏),创建一个放大图div放右边,隐藏
        *  2\鼠标进入缩略图div,显示小div,显示放大图的div
        *  3\获取当前鼠标的相对视口位置-缩略图div相对视口距离得到相对缩略图坐标
        *  4\将小DIV设置与相对缩略图div坐标相同,并不出缩略图
        *  5\修改放大图的背景定位坐标是反向相对视口坐标与(缩略图和方法图的缩略比)乘积
        *  450   303  540
        * */
        var mask,zoom;//小透明div  右侧div
        var arr=["./img611/phone1.jpg","./img611/phone2.jpg","./img611/phone3.jpg","./img611/phone4.jpg","./img611/phone5.jpg","./img611/phone6.jpg"];
        const MINI_WIDTH=450,//左小div宽
            MASK_WIDTH=303,//左透明div宽
            ZOOM_WIDTH=540,//右大div宽
            MINI_LEFT=150,
            MINI_TOP=300;
        init();
        function init() {
            createLeftMini();//创建左侧小div
            createRightZoom();//创建右侧div
           var div= Utils.ce("div",{
                width:"200px",
                height:'4000px'
            });
            document.body.appendChild(div);
            document.addEventListener("click",clickHandler);
        }
        
        function createLeftMini() {//创建左侧小div
           var div=Utils.ce("div",{
                width:MINI_WIDTH+"px",
               height:MINI_WIDTH+"px",
               backgroundImage:"url(./img611/phone.jpg)",
               backgroundSize:"100% 100%",
               border:"1px solid #CCCCCC",
               position:"absolute",
               top:MINI_TOP+"px",
               left:MINI_LEFT+"px"
            });
            mask=Utils.ce("div",{//创建左侧透明div
                width:MASK_WIDTH+"px",
                height:MASK_WIDTH+'px',
                backgroundColor:"rgba(255,230,0,0.3)",
                position:"absolute",
                display:"none"
            });
            div.appendChild(mask);//mask添加入div
           document.body.appendChild(div);//div添入body
            div.addEventListener("mouseenter",mouseHandler);//鼠标移动事件
            div.addEventListener("mouseleave",mouseHandler);
        }
        
        function createRightZoom() {//创建右侧div
            zoom=Utils.ce("div",{
                width:ZOOM_WIDTH+"px",
                height:ZOOM_WIDTH+"px",
                backgroundImage:"url(./img611/phone.jpg)",
                backgroundPositionX:"0px",
                backgroundPositionY:"0px",
                position:"absolute",
                left:MINI_LEFT+MINI_WIDTH+"px",
                top:MINI_TOP+'px',
                display:"none"
            });
            document.body.appendChild(zoom);
        }


        function mouseHandler(e) {
            if(e.type==="mouseenter"){//右侧大div和左侧透明div显示
                mask.style.display="block";
                zoom.style.display="block";
                this.addEventListener("mousemove",mouseHandler);//给div添加鼠标移动事件
            }else if(e.type==="mouseleave"){//右侧大div和左侧透明div隐藏
                mask.style.display="none";
                zoom.style.display="none";
                this.removeEventListener("mousemove",mouseHandler);//给div移除鼠标移动事件
            }else if(e.type==="mousemove"){
                moveMask(e.clientX,e.clientY,this);//(鼠标到视口距离x,鼠标到视口距离y,左侧小div)
                zoomBackgroundPosition();//右侧div背景图位置
            }
        }
        
        function moveMask(x,y,parent) {//移动左侧透明div
            var rect=parent.getBoundingClientRect();//左侧小div
            //透明div的left=鼠标距可视化窗口宽度距离-父容器距可视化窗口宽度距离-自身宽度一半
            mask.style.left=x-rect.x-mask.offsetWidth/2+"px";
            mask.style.top=y-rect.y-mask.offsetHeight/2+"px";
            //给左侧透明div设置移动范围
            if(mask.offsetLeft<=0){
                mask.style.left="0px"
            }
            if(mask.offsetTop<=0){
                mask.style.top="0px"
            }
            if(mask.offsetLeft>=parent.clientWidth-mask.clientWidth){
                mask.style.left=parent.clientWidth-mask.clientWidth+"px";
            }
            if(mask.offsetTop>=parent.clientHeight-mask.clientHeight){
                mask.style.top=parent.clientHeight-mask.clientHeight+"px";
            }
        }
        
        function zoomBackgroundPosition() {//右侧div背景图位置
        	//(大盒子 / 小盒子) * (小盒子 / 放大镜)
            var scale=ZOOM_WIDTH/MASK_WIDTH;
            zoom.style.backgroundPositionX=-mask.offsetLeft*scale+"px";
            zoom.style.backgroundPositionY=-mask.offsetTop*scale+"px";
        }

        
        function clickHandler(e) {
            if(e.target.nodeName!=="BUTTON") return;//事件委托
//            if(e.target.constructor!==HTMLButtonElement) return;
            var index=Array.from(document.querySelectorAll("button")).indexOf(e.target);//获取点击按钮的下标
            zoom.style.backgroundImage=mask.parentElement.style.backgroundImage="url("+arr[index]+")";//换背景图
        }
    </script>

</body>
</html>

甘乐2333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 商品放大镜

//Utils1.jsvar Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...
复制链接

扫一扫

专栏目录