首先非常感谢网友大白的无私分享，此作品是他刚写好的一款原生js自由放大镜特效FreeZoomer，第一时间与大家分享，用法很简单，引用放大镜插件文件和样式文件，html页面上再给图片加上属性class="free-zoomer"和data-img-big="大图的路径"就行了，有什么不明白的就查看作品的源码，里面注释写得很详细，大家好好利用哦。。。
部分核心代码如下：
//获取放大容器
function GetViewPanel() {
var panel = document.getElementById(zoomerViewPanelId);
if (panel == null) {
panel = document.createElement("div");
panel.id = zoomerViewPanelId;
document.body.appendChild(panel);
}
return panel;
}
//显示放大器
function ShowViewPanel(left, top) {
var panel = GetViewPanel();
panel.style.left = (left + 10) + "px";
panel.style.top = top + "px";
panel.style.display = "block";
panel.className = "loading";
return panel;
}
//隐藏放大容器
function HideViewPanel() {
var panel = document.getElementById(zoomerViewPanelId);
if (panel != null) {
panel.style.display = "none";
}
}
//获取对象高度
function GetHeight(ele) {
var paddingTop = parseInt(ele.style.paddingTop);
if (!paddingTop) {
paddingTop = 0;
}
var paddingBottom = parseInt(ele.style.paddingBottom);
if (!paddingBottom) {
paddingBottom = 0;
}
return ele.clientHeight - paddingTop - paddingBottom;
}
//获取对象宽度
function GetWidth(ele) {
var paddingLeft = parseInt(ele.style.paddingLeft);
if (!paddingLeft) {
paddingLeft = 0;
}
var paddingRight = parseInt(ele.style.paddingRight);
if (!paddingRight) {
paddingRight = 0;
}
return ele.clientWidth - paddingLeft - paddingRight;
}
//获取对象坐标
function GetAbsolutePosition(ele) {
var rect = ele.getBoundingClientRect();
var padding = GetPadding(ele);
var border = GetBorder(ele);
var position = {};
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
position.left = rect.left + padding.left + border.left + scrollLeft;
position.top = rect.top + padding.top + border.top + scrollTop;
position.bottom = rect.bottom - padding.bottom - border.bottom + scrollTop;
position.right = rect.right - padding.right - border.right + scrollLeft;
return position;
}
//获取对象4个边距
function GetPadding(ele) {
var padding = {};
padding.top = parseInt(ele.style.paddingTop);
if (!padding.top) {
padding.top = 0;
}
padding.bottom = parseInt(ele.style.paddingBottom);
if (!padding.bottom) {
padding.bottom = 0;
}
padding.left = parseInt(ele.style.paddingLeft);
if (!padding.left) {
padding.left = 0;
}
padding.right = parseInt(ele.style.paddingRight);
if (!padding.right) {
padding.right = 0;
}
return padding;
}
//获取对象4个边框
function GetBorder(ele) {
var border = {};
border.top = parseInt(ele.style.borderTop);
if (!border.top) {
border.top = 0;
}
border.bottom = parseInt(ele.style.borderBottom);
if (!border.bottom) {
border.bottom = 0;
}
border.left = parseInt(ele.style.borderLeft);
if (!border.left) {
border.left = 0;
}
border.right = parseInt(ele.style.borderRight);
if (!border.right) {
border.right = 0;
}
return border;
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友大白 放大镜 FreeZoomer js特效