原生JS实现放大镜功能

原生JS实现的放大镜功能，自己写的，简单使用

点击下面连接去我的github上下载出来打开就行，不需要复杂配置，在img标签的src属性把你自己的图片换上去就ok。
文件在此

走过路过，喜欢的话点个赞，加个关注，鼓励一下吧！

主要功能代码，如下

原理是判断鼠标在小图上的位置，再用一个比例去显示大图上对应的部分！

//鼠标在小盒子中移动时 遮盖层跟着鼠标移动
smallBox.onmousemove = function (e) {e = e || event;//获取鼠标在小盒子中的坐标var x = getPage(e).pageX - box.offsetLeft;var y = getPage(e).pageY - box.offsetTop;x = x - mask.offsetWidth / 2;y = y - mask.offsetHeight / 2;x = x < 0 ? 0 : x;y = y < 0 ? 0 : y;var maxX = smallBox.offsetWidth - mask.offsetWidth;var maxY = smallBox.offsetHeight - mask.offsetHeight;x = x > maxX ? maxX : x;y = y > maxY ? maxY : y;mask.style.left = x + 'px';mask.style.top = y + 'px';//显示对应的大图部分///计算大图片的偏移//mask移动的距离/大图片移动的距离 = mask最大能移动的距离/大图片最大能移动的距离//大图片移动的距离=mask移动的距离 * 大图片最大能移动的距离/mask最大移动的距离//大图片最大能移动的距离var bigMaxX = bigImg.offsetWidth - bigBox.offsetWidth;var bigMaxY = bigImg.offsetHeight - bigBox.offsetHeight;var bigImgx = x * bigMaxX / maxX;var bigImgy = y * bigMaxY / maxY; //负的  因为左边图片鼠标向下移的时候,右边大图应该向上移动bigImg.style.left = -bigImgx + 'px';bigImg.style.top = -bigImgy + 'px';
}

效果图

原生JS实现放大镜功能相关推荐

原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录效果图设计思路基本架子蒙版放大效果图逻辑设计蒙版跟放大的图肯定要先隐藏鼠标移入图片显示蒙版鼠标移动蒙版跟着移动处理边界情况大图移动小优 ...
思路超清晰-js实现放大镜功能
js实现放大镜功能今天写项目,但是发现项目中的图片太小,很多信息我们都看不清楚,但是为了页面布局,我有不能讲图片调的尺寸过于大,因此,就想到了用js实现图片的放大镜来解决我的问题. 实现后功能大 ...
js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...
你需要了解的纯原生JS实现带有功能的前端购物车
先来介绍一下都有哪些功能叭添加购物车,清单库存数量会对应减少,库存不足会警告从购物车删除,库存将返回清单,总价相应变化点击"-",数量会返回到清单库存点击"+&q ...
原生JS 实现放大镜
<div class="container"><div class="smal ...
Html+css+js实现放大镜功能（详细完整代码）
通过将鼠标指向指定的图片,将鼠标移动到图片时,显示一个透明的小区域,然后将小区域的部分放大,查看细节. 运行效果: 详细代码: <!DOCTYPE html> <html>& ...
简易灯箱画廊设计html,原生Js实现的画廊功能
原生Js实现画廊功能,点击图片,在下方出现相应放大图片.给a标签绑定onclick点击事件.这里上方的小图和下方将要展示大图,都是同一张图片,只是上下两个img的style中设置了不同的width和h ...
vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）
vue版本的仿京东放大镜 <template><div class="maxBox"><divref="left"class=&q ...
vue版本的仿京东放大镜代码还有原生js版本的。（组件封装
src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg" alt="& ...

原生JS实现放大镜功能

原生JS实现的放大镜功能，自己写的，简单使用

主要功能代码，如下

效果图

原生JS实现放大镜功能相关推荐

最新文章

热门文章