Zoomerang 实用DOM元素放大缩小特效插件

Zoomerang.js 是一款非常实用的 HTML DOM 元素放大缩小 js 特效插件。它可以将页面上的任何元素进行放大缩小。当某个元素处于 Zoomerang 的监听状态时，点击该元素可以将它放大到屏幕的中间，再次点击它又会回到原来的位置。

使用方法

首先引入 zoomerang.js 文件。

要使用该 js 插件来放大缩小某个元素，该元素要处于被监听的状态。

现在，当你点击#my-image 元素的时候，它就可以放大到屏幕的中间了。在次点击它，该元素又回到原来的位置。

注意事项

该元素放大缩小效果依赖于 CSS Transform（IE 浏览器至少要 IE10 才能支持）

在固定尺寸的元素上效果最佳：display: block、display: inline-block 和 img

避免在很长的文本段上使用

在 mobile 上使用时，最好避免字体自动调整大小

不规则的图片在 Firefox 上会有一条像素边

在 Android 2.x 浏览器上不能正常工作

API 参考

Zoomerang.listen(selector | element)：为所有匹配元素附加点击事件。你可以在该方法中传入一个单独的节点

Zoomerang.open(selector | element, [callback])：在匹配元素上进行放大操作。当过渡动画完成时触发可选的回调函数

Zoomerang.close([callback])：如果当前元素为放大状态，是元素缩小。当过渡动画完成时触发可选的回调函数

Zoomerang.config(options)：参数配置方法，可传入一个 options 对象。可用的 options 有：

transitionDuration：默认值：'.4s'

transitionTimingFunction：默认值：'cubic-bezier(.4,0,0,1)'

bgColor：默认值：'#fff'

bgOpacity：默认值：1

maxWidth：默认值：300。放大时元素的最大宽度

maxHeight：默认值：300。放大时元素的最大高度

deepCopy：是否复制 innerHTML 。如果目标元素有复杂的内部结构，你需要使用该参数来使插件正常工作。默认值：false

onOpen：当目标元素放大并且过渡动画已经完成时的回调函数。该方法的参数是目标元素

onClose：和 onOpen 方法相同，在元素缩小是触发

Zoomerang 实用 DOM 元素放大缩小特效插件

已有 632 人购买

• 永久更新：
• 演示数据：

此资源下载价格为1元立即购买（VIP 免费）立即升级

查看演示升级 VIP立刻购买

演示地址

下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！