js 实现淘宝放大镜

最新推荐文章于 2022-08-29 19:58:44 发布

Bai1997_

最新推荐文章于 2022-08-29 19:58:44 发布

阅读量119

点赞数

分类专栏： js 文章标签：淘宝放大镜效果

本文链接：https://blog.csdn.net/qq_44904804/article/details/99883099

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

淘宝放大镜
需要准备两张图片，和两个div 装小图的显示，装大图div的隐藏
鼠标移动到小div上的时候，显示装大图的div

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#little {
				width: 350px;
				height: 350px;
				border: 1px solid black;
				position: relative;
			}
			
			#kuai {
				width: 175px;
				height: 175px;
				background-color: rgba(255, 255, 0, 0.1);
				position: absolute;
				top: 0px;
				left: 0px;
				display: none;
			}
			
			#big {
				width: 370px;
				height: 370px;
				border: 1px solid black;
				overflow: hidden;
				position: absolute;
				left: 370px;
				top: 0px;
				display: none;
			}
			#datu{
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="little">
			<img src="liuyifei_min.jpg" />
			<div id="kuai"></div>
		</div>
		<div id="big">
			<img id="datu" src="liuyifei_big.jpg" />
		</div>
	</body>
	<script type="text/javascript">
		little.addEventListener("mousemove", function(event) {
			kuai.style.display = "block"
			big.style.display = "block"
			var event = event || window.event
			var warp_bound = little.getBoundingClientRect()
			var click_y = event.clientY - warp_bound.top
			var click_x = event.clientX - warp_bound.left
			var kuai_x =  click_x - kuai.offsetWidth / 2
			var kuai_y = click_y - kuai.offsetHeight / 2 
			
			if(kuai_x >= kuai.offsetHeight) {
				kuai_x = kuai.offsetHeight
			} else if(kuai_x <= 0) {
				kuai_x = 0
			}
			if(kuai_y >= kuai.offsetWidth) {
				kuai_y = kuai.offsetWidth
			} else if(kuai_y <= 0) {
				kuai_y = 0
			}
			var bili = datu.offsetWidth/little.offsetWidth
			kuai.style.top = kuai_y+ "px"
			kuai.style.left = kuai_x+ "px"
			datu.style.top = -kuai_y*bili+ "px"
			datu.style.left =-kuai_x*bili+ "px"
		})

		little.addEventListener("mouseleave", function(evevt) {
			var event = event || window.event
			kuai.style.display = "none"
			big.style.display = "none"
		})
	</script>

</html>

Bai1997_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现淘宝放大镜

淘宝放大镜需要准备两张图片，和两个div 装小图的显示，装大图div的隐藏鼠标移动到小div上的时候，显示装大图的div<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/c...
复制链接

扫一扫