通过css鼠标事件简单实现京东放大镜效果

Posted 小蜗牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过css鼠标事件简单实现京东放大镜效果相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="referrer" content="no-referrer">
		<title></title>
		<style type="text/css">
			.zoom{
				width: 800px;
				height: 250px;
				display: flex;
				margin: 0 auto;
			}
			.left{
				width: 400px;
				height: 250px;
				background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57bbdd4add0f3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625667572&t=ee98422ddcd780a23692e18f809a3aaa");
				background-size: 400px 250px;
				position: relative;
			}
			.shade{
				display: none;
				width: 200px;
				height: 125px;
				background-color: rgba(255,255,0,.5);
				position: absolute;
			}
			.right{
				display: none;
				width: 400px;
				height: 250px;
				background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57bbdd4add0f3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625667572&t=ee98422ddcd780a23692e18f809a3aaa");
				background-size: 800px 500px;
			}
			
		</style>
	</head>
	<body>
		<!-- 放大镜 -->
		<div class="zoom">
			<div class="left">
				<div class="shade"></div>
			</div>
			<div class="right"></div>
		</div>
		
		<script type="text/javascript">
			var zoom = document.querySelector(".zoom");
			var left = document.querySelector(".left");
			var right = document.querySelector(".right");
			var shade = document.querySelector(".shade");
			
			
			/* 鼠标移入遮罩显示 */
			left.onmouseenter = function(){
				shade.style.display = "block";
				right.style.display = "block"
			}
			/* 鼠标移出遮罩影藏 */
			left.onmouseleave =function(){
				shade.style.display = "none"
				right.style.display = "none"
			}
			
			/* 监听鼠标在left上的移动 */
			left.onmousemove = function(event){
				// console.log(event)
				var x = event.pageX - 100 - zoom.offsetLeft;
				var y = event.pageY - 62.5 - zoom.offsetTop;
				if (x < 0) {
					x = 0;
				} 
				if(x > 200){
					x = 200
				}
				if(y<0){
					y=0;
				}
				if(y>125){
					y=125;
				}
				shade.style.left = x + "px";
				shade.style.top = y + "px";
				
				right.style.backgroundPositionX = -2*x + "px";
				right.style.backgroundPositionY = -2*y + "px";
			}
			
		</script>
	</body>
	
</html>

以上是关于通过css鼠标事件简单实现京东放大镜效果的主要内容,如果未能解决你的问题,请参考以下文章

pc端 前端页面 js灯箱效果能放大缩小吗

html+css3实现放大镜效果 (2021-08-25)

仿京东放大镜效果的实现

JS (随着鼠标的移动,旁边显示放大图)

jscss3实现图片的放大效果

jquery实现放大镜效果