纯JS放大镜效果包装方法

最新推荐文章于 2023-02-25 16:20:53 发布

jsp13270124

最新推荐文章于 2023-02-25 16:20:53 发布

阅读量239

点赞数

分类专栏： dom效果文章标签： js2 js dom效果

本文链接：https://blog.csdn.net/jsp13270124/article/details/100591423

版权

dom效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

放大镜效果包装方法

制作思路

放大镜效果通过刚才的鼠标移入移出事件, 在加上之前学的东西就可以做

注意就是: 因为鼠标跟者放大块一起移动所以无法触发移出事件

就需要让防大的小块在大块边缘设置if让他停在边上, 让鼠标可以移出子元素使事件完成

而另一边的图片, 让窗口固定移动下面的图片, 从而达到同时防大框的作用移动(注意按比列扩大框和图片, 虽然一般是缩小一直在的那张图片)

所以主要完成的就是在常驻图片中防大部分随鼠标移动

实现效果

这里有实现效果

放大镜效果.html

在这里插入图片描述

包装代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.img1 {
				width: 800px;
				display: block;
			}

			.imgbox {
				/* 相对与上一个盒子的移动 */
				position: absolute;
				
				/* 这个东西是调整常驻图片的位置(可调) */
				top: 200px;
				left: 200px;
			}

			.moveBox {
				position: absolute;
				display: none;


				/* 这个东西是调整放大框的大小(可调) */
				width: 100px;
				height: 100px;
				background-color: rgba(244, 100, 20, 0.3);
			}

			.moveBox2 {
				position: absolute;
				overflow: hidden;
				display: none;

				/* 这个类的作用是调整防大框的位置(可调) */
				left: 900px;
				top: 200px;
				background-color: rgba(244, 155, 20, 0.6);

			}

			.moveBox2>img {
				position: absolute;
			}

            
			/* 这个类是包装在外的盒子去掉的话就是直接加在docu中 */
			/* 同时也要计算这个盒子离左上零零的距离然后写在参数中 */
			/* var outerSizeLeft = 100; */
			/* var outerSizeTop = 0; */
			.middle {
				/* 这个类可以去掉, 测试间隔所用的类 */
				position: relative;
				margin-left: 100px;
			}

			.hiddenIN {
				width: 0px;
				height: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<!-- 这个盒子可以自行去掉 -->
		<div class="middle">

			<div class="imgbox">
				<!-- 图片也可以换但是要更改 -->
				<img src="img/backGroundImageLong.jpg" alt="" class="img1">
				<div class="moveBox">
				</div>
			</div>

			<div class="moveBox2">
				<img src="img/backGroundImageLong.jpg">
			</div>

		</div>

		<div class="hiddenIN">

		</div>

		<script type="text/javascript">
			// 这两个参数包含imgbox 外部的margin-top top padding 所有影响到这个盒子位置的移动总和
			var outerSizeLeft = 100;
			var outerSizeTop = 0;
			
			// 图片资源
			var imgSrc = "http://www.xxgalgame.com/upload/2019-09-02_2110551567430085449.jpg";
			// "img/backGroundImageLong.jpg"
			// "https://www.lianaiyx.com/d/file/GalGame/2019-09-02/b29040eed124858fc5e696922d3cb8e9.jpg"

			var imgBg = new Image();
			imgBg.src = imgSrc;
			var hiddenIN = document.querySelector(".hiddenIN");
			hiddenIN.appendChild(imgBg);

			// 图片加载以后才会出现放大镜效果
			imgBg.onload = function() {
				// console.log(getComputedStyle(imgBg).width)
				var pictureWidth = imgBg.clientWidth;

				var img1 = document.querySelector(".img1")
				var imgbox1 = document.querySelector(".imgbox");
				var moveBox = document.querySelector(".moveBox");
				var bigImg = document.querySelector(".moveBox2>img");
				var moveBox2 = document.querySelector(".moveBox2");

				img1.src = imgSrc;
				bigImg.src = imgSrc;

				moveBox2.style.width = parseFloat(getComputedStyle(moveBox).width) * pictureWidth / img1.clientWidth + 'px';
				moveBox2.style.height = parseFloat(getComputedStyle(moveBox).width) * pictureWidth / img1.clientWidth + 'px';


				imgbox1.onmouseenter = function(e) {
					moveBox.style.display = "block";
					moveBox2.style.display = "block";
				}

				imgbox1.onmouseleave = function(e) {
					moveBox.style.display = 'none';
					moveBox2.style.display = "none";
				}

				imgbox1.onmousemove = function(e) {
					var imgWidth = imgbox1.clientWidth;
					var imgHeight = imgbox1.clientHeight;

					var leftTemp = e.pageX - imgbox1.offsetLeft - moveBox.clientWidth / 2 - outerSizeLeft;
					var topTemp = e.pageY - imgbox1.offsetTop - moveBox.clientHeight / 2 - outerSizeTop;

					moveBox.style.left = leftTemp + 'px';
					moveBox.style.top = topTemp + 'px';
					if (leftTemp < 0) {
						moveBox.style.left = '0px';
					}

					if (topTemp < 0) {
						moveBox.style.top = '0px';
					}

					if (leftTemp > (imgbox1.clientWidth - moveBox.clientWidth)) {
						moveBox.style.left = imgbox1.clientWidth - moveBox.clientWidth + 'px';
					}

					if (topTemp > (imgbox1.clientHeight - moveBox.clientHeight)) {
						moveBox.style.top = imgbox1.clientHeight - moveBox.clientHeight + 'px';
					}

					bigImg.style.left = -parseFloat(moveBox.style.left) * (pictureWidth / img1.clientWidth) + 'px';
					bigImg.style.top = -parseFloat(moveBox.style.top) * (pictureWidth / img1.clientWidth) + 'px';
				}
			}
		</script>
	</body>
</html>