原生js实现文字放大镜效果

最新推荐文章于 2023-10-26 13:42:01 发布

小毛驴根号七

最新推荐文章于 2023-10-26 13:42:01 发布

阅读量1.4k

点赞数

分类专栏：前端开发文章标签： js 文字放大镜

本文链接：https://blog.csdn.net/weixin_35988354/article/details/83793207

版权

首先讲一下思路.

要放大某一段文字,我想到的是先拿到这段文字,然后在文字上方建一个容器,将文字添加在这个容器中,当鼠标移动到要放大的文字上面时,让容器显示,移动鼠标的同时让容器中的文字逆向移动,这里需要计算一下百分比可以确保移动时文字的位置能和要放大的文字同步,计算起来有点繁琐,所以代码中就随便给了一个值,具体代码如下:

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

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			span {
				display: inline-block;
				height: 30px;
				position: absolute;
				left: 100px;
				top: 50px;
			}
			
			#box {
				width: 50px;
				border: 1px solid #ccc;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="box"></div>//用来做放大镜的容器
		<span id="txt">你好,移动放大查看文字</span>
	</body>

</html>
<script type="text/javascript">
	var oTxt = document.getElementById('txt');
	var oBox = doc

最低0.47元/天解锁文章

小毛驴根号七

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js实现文字放大镜效果

首先讲一下思路.要放大某一段文字,我想到的是先拿到这段文字,然后在文字上方建一个容器,将文字添加在这个容器中,当鼠标移动到要放大的文字上面时,让容器显示,移动鼠标的同时让容器中的文字逆向移动,这里需要计算一下百分比可以确保移动时文字的位置能和要放大的文字同步,计算起来有点繁琐,所以代码中就随便给了一个值,具体代码如下: &lt;!DOCTYPE html&gt;&lt;html l...
复制链接

扫一扫