原生JS实现放大镜效果

create an image magnifier Glass in vanilla js

js, glass

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 593
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function magnify(imgID, zoom) {
    var img, glass, w, h, bw;
    img = document.getElementById(imgID);

/* Create magnifier glass: */
    glass = document.createElement("DIV");
    glass.setAttribute("class", "img-magnifier-glass");

/* Insert magnifier glass: */
    img.parentElement.insertBefore(glass, img);

/* Set background properties for the magnifier glass: */
    glass.style.backgroundImage = "url('" + img.src + "')";
    glass.style.backgroundRepeat = "no-repeat";
    glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
    bw = 3;
    w = glass.offsetWidth / 2;
    h = glass.offsetHeight / 2;

/* Execute a function when someone moves the magnifier glass over the image: */
    glass.addEventListener("mousemove", moveMagnifier);
    img.addEventListener("mousemove", moveMagnifier);

/*and also for touch screens:*/
    glass.addEventListener("touchmove", moveMagnifier);
    img.addEventListener("touchmove", moveMagnifier);

function getCursorPos(e) {
        var a, x = 0,
            y = 0;
        e = e || window.event;
        /* Get the x and y positions of the image: */
        a = img.getBoundingClientRect();
        /* Calculate the cursor's x and y coordinates, relative to the image: */
        x = e.pageX - a.left;
        y = e.pageY - a.top;
        /* Consider any page scrolling: */
        x = x - window.pageXOffset;
        y = y - window.pageYOffset;
        return {
            x: x,
            y: y
        };
    }
}

onload = (event) => {
  magnify("myimage", 3)
}

编译

CSS

HTML

create an image magnifier Glass in vanilla js

js, glass

编辑器支持Emmet

快捷键

create an image magnifier Glass in vanilla js

js, glass

JS实现2022荧光效果的烟花绽放动画

使用原生JS实现可拖拉页面元素

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：