Zoomerang.js插件使用转载自：https://www.22vd.com/35568.html Zoomeran

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方法相同，在元素缩小是触发

例：（来自演示页面）

 Zoomerang
    .config({
        maxHeight: 400, // 最大高度400
        maxWidth: 400,  // 最大宽度400
        bgColor: '#000', // 背景框颜色
        bgOpacity: .85, // 背景透明度
        onOpen: openCallback,  // 放大之后执行回调函数
        onClose: closeCallback, // 缩小之后执行回调函数
        onBeforeOpen: beforeOpenCallback, // 放大之前执行回调函数
        onBeforeClose: beforeCloseCallback // 缩小之前执行回调函数
    })
    .listen('.zoom');
    
     function openCallback (el) {
        console.log('zoomed in on: ')
        console.log(el)
    }

    function closeCallback (el) {
        console.log('zoomed out on: ')
        console.log(el)
    }

    function beforeOpenCallback (el) {
        console.log('on before zoomed in on:')
        console.log(el)
    }

    function beforeCloseCallback (el) {
        console.log('on before zoomed out on:')
        console.log(el)
    }