图片放大镜效果js代码

最新推荐文章于 2024-07-19 06:00:00 发布

小蔡来了

最新推荐文章于 2024-07-19 06:00:00 发布

阅读量508

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_48462578/article/details/115447714

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

图片放大镜效果js代码，需要引入jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jq.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.sbox{
				width:400px;height:400px;
				position: relative;
				cursor: pointer;
				
			}
			.bbox{	
				position: relative;
				width: 400px;
				height: 400px;
				overflow: hidden;
				display: none;
				flex-shrink: 0;
				z-index: 9999;
			}
			.huise{
				width: 100px;height: 100px;
				background: rgba(0,0,0,0.2);
				position: absolute;
				display: none;
				z-index: 999;
			}
			.box{
				display: flex;
				position: relative;
				width:400px;
				height:400px;
				margin: auto;
			}
			.bbox img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="sbox" id="sbox">
				<img src="../img/a.jpg">
				<div class="huise"></div>
			</div>
			<div class="bbox">
				<img src="../img/b.jpg" alt="">
			</div>
		</div>
		<script type="text/javascript">
			var dome = document.getElementById("sbox")
			// 进入
			$(".sbox").mouseenter(function(e) {
				$(this).siblings(".bbox").show();
				$(this).children(".huise").show();
			})
			// 离开
			$(".sbox").mouseleave(function() {
				$(this).siblings(".bbox").hide();
				$(this).children(".huise").hide();
			})
			// 移动
			$(".sbox").mousemove(function(e) {
				// 鼠标离文档左边的距离
				var pageX = e.pageX;
				// 鼠标离父盒子的距离X
				var boxX = $(".sbox").offset().left;
				// 鼠标在盒子内部的位置X值
				var mouseX = pageX - boxX;

				// 鼠标离文档上边的距离
				var pageY = e.pageY;
				// 鼠标离父盒子的距离Y
				var boxY = $(".sbox").offset().top;
				// 鼠标在盒子内部的位置Y值
				var mouseY = pageY - boxY;

				var hX = mouseX - $(".huise").width() / 2;
				var hY = mouseY - $(".huise").height() / 2;

				// 矫正XY的值,不可以超出边界
				if (hX < 0) {
					hX = 0
				}
				if (hX > $(".sbox").width() - $(".huise").width()) {
					hX = $(".sbox").width() - $(".huise").width()
				}

				if (hY < 0) {
					hY = 0
				}
				if (hY > $(".sbox").height() - $(".huise").height()) {
					hY = $(".sbox").height() - $(".huise").height()
				}
				$(".huise").css({
					left: hX + "px",
					top: hY + "px"
				})

				// 大盒子能过移动的总距离
				var bX = $(".bbox img").width() - $(".bbox").width();
				// 灰色遮罩能移动的总距离
				var bY = $(".sbox").height() - $(".huise").height();
				// 相除得到比例-核心关键
				var rate = bX / bY;
				// 大图里的图片移动通过定位position来设置
				$(".bbox img").css({left:-rate * hX + 'px',top:-rate * hY + 'px'});

			})
		</script>
	</body>
</html>

小蔡来了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
图片放大镜效果js代码

图片放大镜效果js代码，需要引入jquery<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="jq.js" type="text/javascript" charset="utf-8"></script> <style> .sbox{ width:4.
复制链接

扫一扫

专栏目录