图片放大镜效果代码_图象特效

	作者：CC	今阅(1)	3日(1)	7日(1)
	发表时间:2024-05-01 10:57:04		30日(3)	总阅(14)

文章摘要：效果是当鼠标在图片上移动时，会在右侧显示出放大的图片，并且通过放大镜效果来放大图片细节，你可以将你想要放大的图片替换到``处，这段代码实现了一个简单的图片放大镜效果

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        .image-zoom-container {
            position: relative;
            width: 400px;
            height: 400px;
            overflow: hidden;
        }

.image-zoom-lens {
            position: absolute;
            border: 1px solid #d4d4d4;
            width: 100px;
            height: 100px;
            display: none;
        }

.image-zoom-result {
            border: 1px solid #d4d4d4;
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 410px;
            background-size: 800px 800px;
            background-repeat: no-repeat;
            display: none;
        }
    </style>
</head>
<body>
    <div class="image-zoom-container">
        <img src="your-image.jpg" width="400" height="400" id="image-zoom">
        <div class="image-zoom-lens"></div>
        <div class="image-zoom-result"></div>
    </div>

lens.addEventListener(\'mousemove\', e => {
            const bounds = image.getBoundingClientRect();
            const x = e.pageX - bounds.left - window.scrollX - lens.offsetWidth / 2;
            const y = e.pageY - bounds.top - window.scrollY - lens.offsetHeight / 2;

lens.style.left = `${x}px`;
            lens.style.top = `${y}px`;

result.style.backgroundImage = `url(\'${image.src}\')`;
            result.style.backgroundPosition = `-${x * 2}px -${y * 2}px`;
        });

lens.addEventListener(\'mouseenter\', () => {
            result.style.display = \'block\';
        });

lens.addEventListener(\'mouseleave\', () => {
            result.style.display = \'none\';
        });
    </script>
</body>
</html>
```
这段代码实现了一个简单的图片放大镜效果。你可以将你想要放大的图片替换到`<img src="your-image.jpg">`处。效果是当鼠标在图片上移动时，会在右侧显示出放大的图片，并且通过放大镜效果来放大图片细节。

前一篇:JavaScript中的Window窗口对象后一篇:精解window.setTimeout()&window.setInterval()使用方式与参数传递问题！

豫ICP备16000183号-1