1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

js放大镜效果实现(非常详解)

放大镜的关键原理:

鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置;

放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步;

需要元素:小图片和大图片,存放小图片和大图片的容器,有一个放大镜;

直接代码演式:

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			#zb{      				width: 400px;      				height: 400px;      				border: 2px solid palevioletred;      				margin: 30px;      				background: url(../zb_users/upload/2019/03/201903191552964099164868.jpg) no-repeat;      				position: relative;      				float: left;      				/*cursor 光标;  crosshair 十字线    鼠标变十分架*/      				cursor: crosshair;      			}      			#zb #ssk{      				width: 220px;      				height: 200px;      				background: white;      				/*opacity 不透明  W3C的写法*/      				opacity: 0.5;      				/*filter  IE的写法   过滤; 滤除;*/      				filter: alpah(opacity=60) ;      				/*等一下这个色块要动,就是要改变left值和top值,所以要定位*/      				position: absolute;      				top: 0;      				left: 0;      				/* ## 右侧和左侧小色块一开始是隐藏的,鼠标移到左边小色块才显示   先隐藏*/      				display: none;      			}      			/*加个没有什么用和小色块同级元素解决移动鼠标颤动的问题   因为它鼠标一移动它有子元素的话会作用到子元素身上(也就是本来作用左侧DIV,一移动就作用在子元素小色块身上了,本来是得到左大块的距离减110和100的,现在相当于小色块有事件:得到的小色块距离,是110和100,再减去110和100,等于0回到原点,然后再一动,反复颤动的问题)*/      			#zb #mr{      				width: 400px;      				height: 400px;      				background: red;      				position: absolute;      				top: 0;      				left: 0;      				opacity: 0;      				filter: alpha(opacity=0);      			}      			#rou{      				width: 440px;      				height: 400px;      				border: 2px solid darkgreen;      				float: left;      				overflow: hidden;      				position: relative;      				/* ## 右侧和左侧小色块一开始是隐藏的,鼠标移到左边小色块才显示   先隐藏*/      				display: none;      			}      			#rou #dt{      				position: absolute;      				left: 0;      				top: 0;      			}      		</style>      		<script type="text/javascript">      			window.onload = function(){      				var zb = document.getElementById('zb');      				var ssk = document.getElementById('ssk');      				var rou = document.getElementById('rou');      				var dt = document.getElementById('dt');      				var mr = document.getElementById('mr');      //			关于js的onmousemove与onmouseover区别over,在鼠标指针移动到指定的对象上时发生。move,在鼠标指针移动时发生。      //			给左侧加鼠标移动事件      //			zb.onmousemove = function(e){      //			改成mr这个 作用在mr和zb结果是一样的,这个没有其它子元素再好理解      			mr.onmousemove = function(e){      //				鼠标只要移动一下就获得鼠标的位置  就先获得事件对象      //				获得事件对象      			var dd = window.event || e;      //			获得div左边的距    offsetX IE的写法    这个是获得事件源左边的距离      			var mouse_zb = dd.offsetX || dd.layerX;      //			获得div顶部的距      			var mouse_db = dd.offsetY || dd.layerY;      //			在网页标题栏上面输出一下      			document.title = mouse_zb +'|'+ mouse_db;      //			计算色块的位置    因为这个色块是220*200的,一半就是中心点      //			skz 色块左   skd色块顶      			var skz = mouse_zb - 110;      			var  skd = mouse_db -100;      //			判断,不让小色块的超出去范围      			if (skz<0) {      				skz=0;      			}      //			这个大小180,是400减220  大块是400减去小色块的220      			if (skz>180) {      				skz=180;      			}      			if (skd<0) {      				skd=0;      			}      			if (skd>200) {      				skd=200;      			}      //			让色块移动      			ssk.style.left = skz +'px';      			ssk.style.top = skd+ 'px';      //			计算右侧图片的位置(实际上是大图片在移动)roudt右大图      			var roudt_left = skz*-2;      			var roudt_top = skd*-2;      //			让右侧图片移动      			dt.style.left = roudt_left +"px";      			dt.style.top = roudt_top + 'px';      			}      //			## 然后再给左侧DIV加移入事件--鼠标放入左图:左侧小色块显示,右侧大图显示      //			给左侧加鼠标移入事件                     mr这个好了,上面理解放在这里      			mr.onmouseover = function(){      //			让左侧色块和右侧DIV显示				        				ssk.style.display = 'block';      				rou.style.display = 'block';      			}      //			给鼠标加移出事件      			mr.onmouseout = function(){      				ssk.style.display = 'none';      				rou.style.display = 'none';      			}      			}			      		</script>      	</head>      	<body>      		<div id="zb">      			<!--小色块-->      			<div id="ssk"></div>      			<!--加个没有什么用和小色块同级元素解决移动鼠标颤动的问题-->      			<div id="mr"></div>      		</div>      		<!--右边DIV-->      		<div id="rou">      			<img src="https://www.qiquanji.com/data/img/dmj/201903191552964053246349.jpg" id="dt"/>      		</div>      	</body>      </html>

代码效果图片

为了大家更方便理解,对这篇文章重新修改过,最终效果点(运行代码)来看

原文链接:https://www.qiquanji.com/post/7699.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: