2月03th

自由放大镜特效FreeZoomer

DIY前端特效我来说两句!

非常感谢网友大白的无私分享 此作品是他刚写好的一款原生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;
}

本文出自:DIY博客园,链接:https://www.diybloghome.com/fontend/688.html,转载请注明!