纯原生js+css实现放大镜效果

最新推荐文章于 2022-09-15 22:05:00 发布

停止的人间花火

最新推荐文章于 2022-09-15 22:05:00 发布

阅读量280

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Hpluvalbe/article/details/115096573

版权

本文分享了一个利用JavaScript和CSS实现的放大镜效果。通过JavaScript动态生成放大倍数的img标签，并将其置于div中，随着鼠标在原图片上移动，调整放大镜img的位置，从而呈现放大镜效果。

摘要由CSDN通过智能技术生成

    今日突然兴起，查看以前的笔记，翻到了以前完成的一个实现放大镜效果的js，感觉这段代码写的还不错（虽然页面上的文本是用的是别人的，但是代码是自己写的），特来分享给大家。
    主要的思路是通过js生成一个放大指定倍数的img标签并放入一个div中，当鼠标在原图片中移动的时候也同时移动这个放大后的img元素，达到一个放大镜的效果。
    实现的效果如下：
在这里插入图片描述

代码如下：

<html>
	<head>
		<meta charset="utf-8"/>
		<title>放大镜</title>
		<style>
			div{
   
				margin:0px;
				width: 200px;
				height: 200px;
				border: 1px black solid;
				overflow: hidden;
			}
			.shadow{
   
				
			}
			img{
   
				width: 100%;
				height: 100%;
				cursor: pointer;
			}
			
		</style>
	</head>
	<body>
		<p>layer的原点是边框外交点，offset是内交点</p>
		<p>layerX:  layerY:  offsetX:  offsetY: </p>
		<div id="pic">
			<img src="ded240cb0b7f956075efe672d407dcf9.jpg" alt="图片"/>
		</div>
		<div id="big" style="position:absolute;top:300px;">
			
		</div>
	</body>
	<script>
		console.log(document.styleSheets);
		var pic = document.