使用原生JS实现图片放大镜效果

时间: 2019-09-06阅读: 294标签: 效果

前提先了解数学算法:
求遮罩层mask宽度,大图、大图显示区、小图、遮罩层
1、小图是大图等比缩放的
2、遮罩层是大图显示区缩放的
小图/大图 = 遮罩层/大图显示区
遮罩层 = 大图显示区*(小图/大图);
    ------------------------------------------------
大图活动区 = 大图-大图显示区
小图活动区 = 小图-遮罩层

遮罩层偏移量/小图活动区 = 大图偏移量/大图活动区

大图偏移量 = 大图活动区*(遮罩层偏移量/小图活动区)
大图偏移量 = (大图-大图显示区)*(遮罩层偏移量/(小图-遮罩层))


放大镜 == 100*100橘色方块 简称:方块1

左窗口 == 200*200蓝色方块 简称:方块2

右窗口 == 200*200紫色方块 简称:方块3

原图 == 400*400青色方块 简称:方块4

用一个表达式就是:方块1的left值(或top值)/方块4的left值(或top值)=(-1)*方块2的宽度/方块四的宽度。这里我们需要注意的是方块1的定位父级是方块2,方块4的定位父级是方块3。另外小图的长宽与左窗口的长宽保持一致。我们等比例地根据方块1的top值和left值去修改方块4的top值和left值,并且方块超出部分不可见,就可以实现放大镜效果。
 

分解动作:
1、布局
2、计算遮罩层宽高度
3、为small绑定移入移出事件处理
4、为small绑定鼠标移入事件处理
      4.1、计算mask的偏移量 (e.clientX-zoom.offsetLeft-zoom.clientLeft-mask.offsetWidth/2)
      4.2、规定mask的最大最小偏移量
      4.3、计算大图偏移量(参照公式)

 

注意事项:
1、鼠标移入和鼠标移动事件应该加给small
 2、offsetX/offsetY 值不准确,应该使用clientX/clientY代替

 

效果图:


 

源码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			/*整个div中只放置小显示区域即可,大显示区域隐藏,这样直接对zoom设置属性就行了*/
			
			.zoom {
				width: 200px;
				height: 200px;
				margin-left: 100px;
				margin-top: 100px;
				/*margin-top: 1000px;  测试有滚动条情况下反应*/
				position: relative;
				border: solid 1px #000;
			}
			
			.big_area {
				/*大显示区域宽高可直接改变*/
				width: 200px;
				height: 200px;
				position: absolute;
				left: -10000px;
				top: -1px;
				border: solid 1px #000;
				overflow: hidden;
			}
			
			.big_area img {
				position: absolute;
				left: 0;
				top: 0;
			}
			/*遮罩层*/
			
			.mask {
				position: absolute;
				left: -10000px;
				top: 0;
				width: 100px;
				height: 100px;
				background: #000;
				opacity: 0.65;
				filter: alpha(opacity=65);
			}
		</style>
	</head>

	<body>
		<div>
			<div>
				<img src="images/zoom.jpg" width="200" height="200" />
				<span></span>
			</div>
			<div>
				<img src="images/zoom.jpg" width="620" height="620">
			</div>
		</div>

		<script>
			// 获取相应节点元素
			var zoom = document.querySelector('.zoom');
			var simg = document.querySelector('.small_area img');
			var bimg = document.querySelector('.big_area img');
			var big = document.querySelector('.big_area');
			var small = document.querySelector('.small_area');
			var mask = document.querySelector('.mask');

			// 设置遮罩层宽高  小图宽 除以 大图宽 乘以 大显示区域边框
			mask.style.width = (simg.offsetWidth / bimg.offsetWidth) * big.clientWidth + "px";
			mask.style.height = (simg.offsetHeight / bimg.offsetHeight) * big.clientHeight + "px";

			// 定义遮罩层最大边距,也就是最大移动距离
			var maxW = simg.clientWidth - mask.offsetWidth;
			var maxH = simg.clientHeight - mask.offsetHeight;

			// 鼠标移入小显示区域发生事件:1.遮罩层显示 2.大显示区域显示
			small.onmouseenter = function() {
				mask.style.left = 0;
				big.style.left = 210 + "px";
			}
			// 鼠标移入小显示区域发生事件:1.遮罩层消失 2.大显示区域消失
			small.onmouseleave = function() {
				mask.style.left = -10000 + "px";
				big.style.left = -10000 + "px";
			}
			// 鼠标在小显示区域移动
			small.onmousemove = function(e) {
				// 解决兼容问题
				e = e || window.event;
				// 定义两个变量 让鼠标位置一直处于遮罩层位置中间
				var nLeft = e.pageX - zoom.offsetLeft - zoom.clientLeft - mask.offsetWidth / 2;
				var nTop = e.pageY - zoom.offsetTop - zoom.clientTop - mask.offsetHeight / 2;

				// 设置遮罩层永远显示在小显示区域内部 也就是判断nLeft、nTop值
				nLeft = Math.min(maxW, Math.max(0, nLeft));
				nTop = Math.min(maxH, Math.max(0, nTop));

				// 遮罩层位置
				mask.style.left = nLeft + "px";
				mask.style.top = nTop + "px";

				// 设置大图片移动位置 跟随遮罩层百分比移动(语法带入)
				bimg.style.left = -(bimg.offsetWidth - big.clientWidth) * (nLeft / (simg.clientWidth - mask.offsetWidth)) + "px";
				bimg.style.top = -(bimg.offsetHeight - big.clientHeight) * (nTop / (simg.clientHeight - mask.offsetHeight)) + "px";

			}
		</script>
	</body>
</html>


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5242

让网页变灰的实现_网站蒙灰CSS样式总汇

每次全国哀悼日,各大网站首页都变成了灰色,添加以下全局CSS样式,可以实现此效果:使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。

Css3实现背景毛玻璃效果

ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法;CSS3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项:

利用CSS变量实现炫酷的悬浮效果

最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

background 实现四角选中框效果

background 上绑定的多项背景图实际为background-image 和 background-position;也就是图片和位置;linear-gradient 是一种特殊的image类型,之后禁止重复和background-size是设置每个点的宽高

CSS如何在页面加载时创建淡入效果?

想要使用CSS在页面加载上创建淡入效果,可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。通过2个关键帧来定义CSS动画:一个不透明度设置为0,另一个不透明度设置为1。

一个简易的 LED 数字时钟Js实现方法

这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了

css如何实现首字下沉效果?

在CSS中可以使用伪元素::first-letter来选中一段文本的首字,然后使用font-size属性设置首字大小,在通过float属性来将实现下沉效果。:first-letter 伪元素向文本的第一个字母添加特殊样式。

jQuery 效果方法summary

定义和用法slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。(被选元素的高度发生变化),该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素

纯CSS3制作3d网红热词盒子

今天给大家分享的是CSS3制作的带3d效果的方块,上面简单整理了一下2019年的网红热词。这个DEMO用到了CSS3的3d变化技巧,做出来的效果还不错。请注意,该3d效果依赖transform-style: preserve-3d属性

Js实现动态轮播图效果

功能描述:1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步3.拷贝第一张图片添加到ul最后可以实现动态添加图片

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广