04
2018
09

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

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

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。