jqzoom图片放大镜

jqzoom是一个图片放大器插件。它功能强大，使用简便！

引入js与css：

<link href="jquery.jqzoom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="jquery.jqzoom.js"></script>

html：

<div class="content">
    <a href="qbl.png" id="jqzoomIMG" title="123">
        <img src="qbl.png" alt="" width="200"/>
    </a>
</div>

js代码：

$(function () {
    $("#jqzoomIMG").jqzoom({ //绑定图片放大插件jqzoom
        zoomWidth:200, //小图片所选区域的宽
        zoomHeight: 200, //小图片所选区域的高
        zoomType: 'standard', //设置放大镜的类型，默认standard即选中的部分变灰，reverse即非选中变灰
        title: false   // 不要标题设为false
    });
});

 

PS：解决该插件在新本版jQuery中的兼容性问题：$.browser修改为$.support

2、常用配置参数

• zoomType，默认值：'standard'，另一个值是'reverse'，是否将原图用半透明图层遮盖
• zoomWidth，放大窗口的宽度
• zoomHeight，放大窗口的高度
• xOffset，默认值：10，放大窗口相对于原图的x轴偏移值，可以为负
• yOffset，默认值：0，放大窗口相对于原图的y轴偏移值，可以为负
• position，默认值：'right'，放大窗口的位置，值还可以是:'right' ,'left' ,'top' ,'bottom'
• title，默认值：true，在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值
• lens，默认值：true，若为false，则不在原图上显示镜头
• imageOpacity，默认值：0.2，当zoomType的值为'reverse'时，这个参数用于指定遮罩的透明度
• showEffect，默认值：'show'，显示放大窗口时的效果，值可以为: 'show' ,'fadein'
• hideEffect，默认值：'hide'，隐藏放大窗口时的效果: 'hide' ,'fadeout'
• fadeinSpeed，默认值：'fast'，放大窗口的渐显速度(选项: 'fast','slow','medium')
• fadeoutSpeed，默认值：'slow'，放大窗口的渐隐速度(选项: 'fast','slow','medium')
• showPreload，默认值：true，是否显示加载提示Loading zoom(选项: 'true','false')
• preloadText，默认值：'Loading zoom'，自定义加载提示文本

最后上传一张效果图：

插件源码：

https://github.com/asimpleday/plugin/tree/master/jqzoom