淘宝js图片局部放大镜插件代码及Demo效果
2015-03-17 10:15:36  By: dwtedx

一款原生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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+