原生js方大镜小例子

最新推荐文章于 2022-06-25 00:03:11 发布

明天自己会更好

最新推荐文章于 2022-06-25 00:03:11 发布

阅读量176

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_40770473/article/details/108920369

版权

JS 专栏收录该内容

26 篇文章

订阅专栏

本文通过一个实例展示了如何使用原生JavaScript实现图片选择后在左侧显示放大区域的效果。内容包括HTML结构、CSS样式和JavaScript代码的详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1效果图

在图片区域选中左侧出现放大区域
在这里插入图片描述

2html

<body>
		<div id="min_tu">
			<img src="imgs/3.jpg" />
			<div id="fdj"></div>
		</div>
		<div id="list">
			<ul>
				<li><img src="imgs/3.jpg" /></li>
				<li><img src="imgs/3.jpg" /></li>
				<li><img src="imgs/3.jpg" /></li>
				<li><img src="imgs/3.jpg" /></li>
			</ul>
		</div>
		<div id="max_tu">
			<img id="bigPic" src="imgs/3.jpg" />
		</div>
	</body>

3css

<head>
		<meta charset="UTF-8">
		<title>放大镜2</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			
			#min_tu {
				width: 400px;
				height: 400px;
				border: 1px solid #333;
				margin: 70px 0px 0px 100px;
				position: relative;
			}
			
			#min_tu>img {
				width: 100%;
			}
			
			#fdj {
				width: 160px;
				height: 160px;
				background-color: yellow;
				opacity: 0.4;
				position: absolute;
				left: 0px;
				top: 0px;
				display: none;
			}
			
			#max_tu {
				width: 400px;
				height: 400px;
				position: absolute;
				top: 70px;
				left: 521px;
				border: 1px solid #333;
				overflow: hidden;
				display: none;
			}
			
			#max_tu>img {
				position: absolute;
				left: -500px;
			}
			/*设置图片列表*/
			
			#list {
				width: 400px;
				height: 100px;
				margin: 5px 0px 0px 100px;
				border: 1px solid #333;
			}
			
			#list>ul>li {
				height: 100px;
				float: left;
			}
			
			#list>ul>li>img {
				height: 100%;
			}
		</style>
	</head>

4js

<script type="text/javascript">
		//或取元素
		//获取小图外层div
		var mymin_tu = document.getElementById("min_tu");
		//获取放大镜
		var myfdj = document.getElementById("fdj");
		//获取大图外层div
		var mymax_tu = document.getElementById("max_tu");
		//获取大图图片
		var mybigPic = document.getElementById("bigPic");
		//获取图片div集合
		var mylist = document.getElementById("list");

		//获取小图div的left/top
		var minL = mymin_tu.offsetLeft;
		var minT = mymin_tu.offsetTop;

		//获取小图div的宽和高
		var minW = mymin_tu.offsetWidth;
		var minH = mymin_tu.offsetHeight;

		//获取大图图片的宽高
		var imgW = 0;
		var imgH = 0;

		//获取放大镜的宽高
		var fdjW = 0;
		var fdjH = 0;

		//设置鼠标移入事件
		mymin_tu.onmouseover = function() {
			myfdj.style.display = "block";
			mymax_tu.style.display = "block";
			//获取放大镜的宽高
			fdjW = myfdj.offsetWidth;
			fdjH = myfdj.offsetHeight;

			//获取显示后的大图的宽高
			imgW = mybigPic.offsetWidth;
			imgH = mybigPic.offsetHeight;
		}
		//设置鼠标移出事件
		mymin_tu.onmouseout = function() {
			myfdj.style.display = "none";
			mymax_tu.style.display = "none";
		}

		//设置放大镜的移动
		mymin_tu.onmousemove = function(e) {
			var e = e || window.event;
			//获取鼠标在页面中的位置
			var x = e.pageX;
			var y = e.pageY;

			//计算放大镜最终的left居左值 和  top距顶值的值
			var l = x - minL - fdjW / 2;
			//			console.log(l + "," + minW)
			var t = y - minT - fdjH / 2;

			//判断放大镜的位置
			//水平或X值的临界值
			var XL = minW - fdjW - 2;
			var YL = minH - fdjH - 2;

			//限定放大镜的移动范围
			if(l >= XL) {
				l = XL;
			}
			if(l <= 0) {
				l = 0;
			}
			if(t >= YL) {
				t = YL;
			}
			if(t <= 0) {
				t = 0;
			}
			//设置left和top
			myfdj.style.left = l + 'px';
			myfdj.style.top = t + 'px';

			var bigL = -imgW * l / minW;
//			console.log()
			var bigT = -imgH * t / minH;

			mybigPic.style.left = bigL + "PX";
			mybigPic.style.top = bigT + "PX";
		}

		//获取图片列表下的所有li
		var myli = mylist.children[0].children;
		//获取有所的图片
		var len = myli.length;

		for(var i = 0; i < myli.length; i++) {
			myli[i].onclick = function() {
				mymin_tu.children[0].src = this.children[0].src;

				mybigPic.src = this.children[0].src;
			}
		}
	</script>