JS-案例-简单放大镜效果

最新推荐文章于 2022-09-22 20:00:08 发布

joker.ma

最新推荐文章于 2022-09-22 20:00:08 发布

阅读量304

点赞数

CC 4.0 BY-SA版权

分类专栏：案例文章标签： JS 放大镜拖拽商品显示

本文链接：https://blog.youkuaiyun.com/qq_45092792/article/details/93986455

案例专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用JavaScript封装一个简单的放大镜效果，适用于商品展示。通过动态创建div并设置样式，实现实时拖拽查看细节的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装js，主要用到ce 用来创建div的样式

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;
        }
    }
})();

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入封装js -->
    <script src="./js/Utils.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
        * */
        //定义mask zoom
        var mask,zoom;
        //定义数组存放图片1——6
        var arr=["./img/phone1.jpg","./img/phone2.jpg","./img/phone3.jpg","./img/phone4.jpg","./img/phone5.jpg","./img/phone6.jpg"];
        //定义常量小div的宽度，放大镜div宽度，小div左边距离，上边距离
        const MINI_WIDTH=450,
            MASK_WIDTH=303,
            ZOOM_WIDTH=540,
            MINI_LEFT=150,
            MINI_TOP=150;
        //执行初始化函数
        init();
        //定义初始化函数
        function init() {
            //创建存放图片的小div
            createLeftMini();
            //创建右边的大的存放放大后效果的div
            createRightZoom();
            //给div设置样式
            var div=Utils.ce("div",{
                width:"200px",
                height:"4000px"
            });
            //将div添加到body中
            document.body.appendChild(div);
            //添加点击的侦听事件
            document.addEventListener("click",clickHandler)
        }    

        //点击事件函数
        function clickHandler(e){
            //如果不是button   跳出
            if(e.target.nodeName!=="BUTTON") return;
            // if(e.target.constructor!==HTMLButtonElement) return;
            //获取所有的button队列转换成数组并查找当前项，然后赋值给index
            var index=Array.from(document.querySelectorAll("button")).indexOf(e.target);
            //给zoom里添加对应的背景图片
            zoom.style.backgroundImage=mask.parentElement.style.backgroundImage="url("+arr[index]+")";
        }

        //创建左边小div的函数
        function createLeftMini() {
            //通过封装函数给div写样式
            var div=Utils.ce("div",{
                width:MINI_WIDTH+"px",
                height:MINI_WIDTH+"px",
                backgroundImage:"url(./img/phone.jpg)", 
                backgroundSize:"100% 100%",
                border:"1px solid #cccccc",
                position:"absolute",
                top:MINI_TOP+"px",
                left:MINI_LEFT+"px"
            });
            //放大镜的小div样式
            mask=Utils.ce("div",{
                width:MASK_WIDTH+"px",
                height:MASK_WIDTH+"px",
                backgroundColor:"rgba(255,230,0,0.3)",
                position:"absolute",
                display:"none"
            });
            //将mask放进div中
            div.appendChild(mask);
            //将div放到body中
            document.body.appendChild(div);
            //添加鼠标进入侦听事件
            div.addEventListener("mouseenter",mouseHandler);
            //添加鼠标离开侦听事件
            div.addEventListener("mouseleave",mouseHandler);
        }
        
        //创建右边大div函数
        function createRightZoom() {
            //给zoom添加样式
            zoom=Utils.ce("div",{
                width:ZOOM_WIDTH+"px",
                height:ZOOM_WIDTH+"px",
                backgroundImage:"url(./img/phone.jpg)",
                backgroundPositionX:"0px",
                backgroundPositionY:"0px",
                position:"absolute",
                left:MINI_LEFT+MINI_WIDTH+2+"px",
                top:MINI_TOP+"px",
                display:"none",
                border:"1px solid #000000"
            });
            //将zoom添加到body中
            document.body.appendChild(zoom);
        }
        
        //鼠标事件函数
        function mouseHandler(e) {
            //如果目标类型是鼠标进入
            if(e.type==="mouseenter"){
                //mask  zoom 的属性
                mask.style.display="block";
                zoom.style.display="block";
                //目标元素添加鼠标移动事件
                this.addEventListener("mousemove",mouseHandler)
            //否则如果目标类型是鼠标离开    
            }else if(e.type==="mouseleave"){
                //mask  zoom 的属性
                mask.style.display="none";
                zoom.style.display="none";
                //删除鼠标移动的侦听事件
                removeEventListener("mousemove",mouseHandler);
            //否则如果目标类型是鼠标移动    
            }else if(e.type==="mousemove"){
                //执行moveMask函数（带入参数）
                moveMask(e.clientX,e.clientY,this);
                //执行zoomBackgroundPosition函数
                zoomBackgroundPosition();
            }
        }
        //创建moveMask 函数
        function moveMask(x,y,parent){
            // getBoundingClientRect用于获取某个元素相对于视窗的位置集合。
            var rect=parent.getBoundingClientRect();
            //mask的属性
            mask.style.left=x-rect.x-mask.offsetWidth/2+"px";
            mask.style.top=y-rect.y-mask.offsetHeight/2+"px";
            //如果mask相对父容器的左边距小于等于0
            if(mask.offsetLeft<=0){
                //mask左边距设为0px
                mask.style.left="0px"
            }
            //如果mask相对父容器的上边距小于等于0
            if(mask.offsetTop<=0){
                //mask上边距设为0px
                mask.style.top="0px"
            }
            //如果mask左边大于等于父容器宽度减mask宽度
            if(mask.offsetLeft>=parent.clientWidth-mask.clientWidth){
                //mask左边的值设为父容器宽度减mask宽度
                mask.style.left=parent.clientWidth-mask.clientWidth+"px";
            }
            //如果mask上边大于等于父容器宽度减mask宽度
            if(mask.offsetTop>=parent.clientHeight-mask.clientHeight){
                //mask上边的值设为父容器宽度减mask宽度
                mask.style.top=parent.clientHeight-mask.clientHeight+"px";
            }
        }

        //创建zoomBackgroundPosition函数
        function zoomBackgroundPosition() {
            //定义一个scale值  zoom的宽度除以mask宽度（用来调整右边显示区域的显示图片移动比例）
            var scale=ZOOM_WIDTH/MASK_WIDTH;
            //zoom的背景图片位置变化（注意右边显示区域的移动与鼠标滑动方向相反）
            zoom.style.backgroundPositionX=-mask.offsetLeft*scale+"px";
            zoom.style.backgroundPositionY=-mask.offsetTop*scale+"px";
        }
    </script>
</body>
</html>