淘宝js图片局部放大镜插件代码及Demo效果

一款原生js*放大镜特效FreeZoomer、可用于商品展示的图片放大、如淘宝京东都有类似功能、在这里与大家分享一个纯js写的插件

用法很简单、引用放大镜插件文件和样式文件、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 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;
}

加载事件

function AddEventListener(obj, eventName, func) {
    if (obj.addEventListener) {
        obj.addEventListener(eventName, func, false);
    }
    else {
        if (obj.attachEvent) {
            obj.attachEvent("on"   eventName, func)
        }
        else {
            alert("FreeZoomer无法加载事件！");
        }
    }
}

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1rWoyE 密码: wbrn