前端代码实现放大镜效果

最新推荐文章于 2024-02-27 11:48:49 发布

web 沐

最新推荐文章于 2024-02-27 11:48:49 发布

阅读量3k

点赞数 2

文章标签： HTML JS

本文链接：https://blog.csdn.net/weixin_45582846/article/details/100172593

版权

前端代码实现放大镜效果

利用css和js实现页面放大镜效果
像一些淘宝等购物商场
商品放大镜可以更为清晰地观看喜欢的物品

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.yuantu{
				width: 300px;
				height: 300px;
				float: left;
				margin-top: 100px;
				margin-left: 100px;
				position: relative;
				cursor: move;
			}
			img{
				width: 100%;
				height: 100%;
			}
			.fangdatu{
				width: 300px;
				height: 300px;
				float: left;
				margin-top: 100px;
				display: none;
				overflow: hidden;
				position: relative;
			}
			.fangdatu img{
				width: 200%;
				height: 200%;
				position: absolute;
			}
			.fdj{
				width: 100px;
				height: 100px;
				opacity: 0.5;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
			.m{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="yuantu">
			<img src="imgs/01.jpg"/>
			<div class="fdj"></div>
		</div>
		<div class="fangdatu">
			<img src="imgs/01.jpg"/>
		</div>
	</body>
	<script type="text/javascript">
		var yuantu = document.getElementsByClassName("yuantu")[0];
		var fangdatu = document.getElementsByClassName("fangdatu")[0];
		var fdj = document.getElementsByClassName("fdj")[0];
		var img = document.getElementsByTagName("img")[1];
		/*鼠标悬停*/
		yuantu.onmouseenter = function () {
			fdj.className = "fdj m";
			fangdatu.className = "fangdatu m"
		}
		/*鼠标离开*/
		yuantu.onmouseleave = function () {
			fdj.className = "fdj";
			fangdatu.className = "fangdatu"
		}
		/*鼠标移动 监听鼠标位置*/
		yuantu.onmousemove = function (event) {
			var event = event||window.event;
			
			x= event.pageX-yuantu.offsetLeft-fdj.offsetWidth/2;
			y= event.pageY-yuantu.offsetTop-fdj.offsetHeight/2;
			
			if(x<0){
				x=0;
			};
			if(y<0){
				y=0;
			};
			if(x>this.offsetWidth-fdj.offsetWidth){
				x=this.offsetWidth-fdj.offsetWidth;
			};
			if(y>this.offsetHeight-fdj.offsetHeight){
				y=this.offsetHeight-fdj.offsetHeight;
			};
			
			
			fdj.style.left = x+"px";
			fdj.style.top = y+"px";
			
			img.style.left = -x*2+"px";
			img.style.top = -y*2+"px";
		}
	</script>
</html>

如有疑问或者问题请联系小编！！！！！！

web 沐

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
前端代码实现放大镜效果

前端代码实现放大镜效果利用css和js实现页面放大镜效果像一些淘宝等购物商场商品放大镜可以更为清晰地观看喜欢的物品<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"...
复制链接

扫一扫