js自由放大镜特效FreeZoomer

js自由放大镜特效FreeZoomer

添加时间:2021-02-11 13:46:13
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:图片插件
  • 模板颜色模板颜色:
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

此作品是他刚写好的一款原生js自由放大镜特效FreeZoomer,第一时间与大家分享,用法很简单,引用放大镜插件文件和样式文件,html页面上再给图片加上属性class="free-zoomer"和data-img-big="大图的路径"就行了,有什么不明白的就查看作品的源码,里面注释写得很详细,大家好好利用哦。。。
js自由放大镜特效FreeZoomer
分类:图片代码 > 图片插件 难易:

首先引用文件

<link type="text/css" href="style.css" rel="stylesheet" />
        <script type="text/javascript" src="FreeZoomer.js"></script>

//获取放大容器//显示放大器//隐藏放大容器//获取对象高度//获取对象宽度

//获取放大容器
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;
}
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:js自由放大镜特效FreeZoomer

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.200226s