简易放大镜功能 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid #ccc;
            background-image: url(./1.jpg);
            width: 500px;
            height: 500px;
            background-position: 0px 0px;
            background-repeat: no-repeat;
         background-size: 1920px 1080px;
        }
    </style>
</head>

<body>
    <div style="position:relative">
        <img id="clothes" class="clothes" src="./1.jpg" alt="" width="500">
    </div>
    <div class="box" id="box"></div>
    <script>
        function getImgNatural(img,callback){
            var nWidth,nHeight
            if(img.naturalWidth){
                nWidth=img.naturalWidth
                nHeight=img.naturalHeight
                callback(nWidth,nHeight)
            }else{
                var image=new Image()
                image.src=img.src
                image.onload=function(){
                    callback(image.width,image.height)
                }
            }
            // return [nWidth,nHeight]
        }
        function test(img,callback){
            var image=new Image()
                image.src=img.src
                image.onload=function(){
                    callback(image.width,image.height)
                    image=null
                }

        }
        function test2(img,callback){
            return new Promise((resolve,reject)=>{
                var image=new Image()
                image.src=img.src
                image.onload=function(){
                    resolve([image.width,image.height])
                    image=null
                }
            })

        }
        test2(img).then((res)=>{
            console.log(res);
        })
        let img = document.getElementById('clothes')
        img.onmousemove = (e) => {
            const { top, left, bottom, right } = img.getBoundingClientRect()
            let x = e.clientX, y = e.clientY
            console.log(x, y);
            let width = img.clientWidth
            let height = img.clientHeight
            let ab_x = (x - left) / width
            let ab_y = (y - top) / height
            console.log(ab_x, ab_y);
            // let maxwidth = 1920;
            // let maxheight = 1080;
            // let maxwidth = test(img)
            // let maxheight = test(img)
            test(img,handle)
            function handle(maxwidth,maxheight){
                console.log(maxwidth,maxheight);
                let res_x = ab_x*maxwidth
            let res_y = ab_y*maxheight
            if (res_x > maxwidth - 500) {
                res_x = maxwidth - 500
            } else if (res_x < 0) {
                res_x = 0
            }

            if (res_y > maxheight - 500) {
                res_y = maxheight - 500
            } else if (res_y < 0) {
                res_y = 0
            }
            console.log(`${res_x}px ${res_y}px`);
            //获取在百分比的位置  边界00  11------
            document.getElementById('box').style.backgroundPosition = `-${res_x}px -${res_y}px`
            }


        }
    </script>

</body>

</html>
posted @   7c89  阅读(15)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
· 前端实现粘贴图片预览的功能
· 原生select ...
· 放大镜效果
· js实现放大镜
· js实现放大镜多种写法
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
点击右上角即可分享
微信分享提示