js原生放大镜插件及H5+css+js代码

最新推荐文章于 2023-02-03 21:30:43 发布

weijieyuhyt

最新推荐文章于 2023-02-03 21:30:43 发布

阅读量284

点赞数

分类专栏： js原生放大镜文章标签： javascript css jquery

本文链接：https://blog.csdn.net/weijieyuhyt/article/details/103959469

版权

这篇博客介绍了如何使用JavaScript实现一个原生的放大镜插件，涉及到的关键技术包括CSS、JavaScript和HTML。通过创建Magnifier类并绑定鼠标事件，实现在小图上移动时大图同步放大显示的效果。

摘要由CSDN通过智能技术生成

js原生放大镜插件及H5+css+js代码

原生js放大镜插件：
<!将此段代码封装在mfPulgin.js文件中！>
class Magnifier {
constructor(newSmallBox, newBigBox, newMask) {
this.smallBox = newSmallBox;
this.bigBox = newBigBox;
this.mask = newMask;
}
onmouseover() {
let that = this;
this.smallBox.onmouseover = function() {
that.bigBox.style.display = “block”;
that.mask.style.display = “block”;
}
}
onmouseout() {
let that = this;
this.smallBox.onmouseout = function() {
that.bigBox.style.display = “none”;
that.mask.style.display = “none”;
}
}
onmousemove() {
let that = this;
this.smallBox.onmousemove = function(evt) {
let e = evt || event;
let left = e.pageX - this.offsetLeft - that.mask.offsetWidth / 2;
let top =