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

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

使用方法

首先引入zoomerang.js文件。

<script src="js/zoomerang.js"></script>                
              

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

Zoomerang.listen('#my-image')                
              

现在，当你点击#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方法相同，在元素缩小是触发。