前端代码实现放大镜效果

web 沐

3339人浏览 · 2019-08-31 14:33:15

web 沐 · 2019-08-31 14:33:15 发布

前端代码实现放大镜效果

利用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>

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

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模