jQuery图片放大插件jqzoom.js

 查看演示  website  立即下载

使用方法

引用jquery库、jqzoom.js和jqzoom.css

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<link rel="stylesheet" href="style/jqzoom.css" type="text/css" media="screen" />

html

<div class="jqzoom"><img src="images/me_small.jpg"  alt="scarpa"  jqimg="images/me_big.jpg"></div>

初始化插件

$(".jqzoom").jqueryzoom({
    xzoom: 250, //zooming div default width(default width value is 200)
    yzoom: 250, //zooming div default width(default height value is 200)
    offset: 10, //zooming div default offset(default offset value is 10)
    position: "right" //zooming div position(default position value is "right")
});

配置参数：

• zoomType，默认值：’standard’，另一个值是’reverse’，是否将原图用半透明图层遮盖。

• zoomWidth，默认值：200，放大窗口的宽度。

• zoomHeight，默认值：200，放大窗口的高度。

• xOffset，默认值：10，放大窗口相对于原图的x轴偏移值，可以为负。

• yOffset，默认值：0，放大窗口相对于原图的y轴偏移值，可以为负。

• position，默认值：’right’，放大窗口的位置，值还可以是:’right’ ,’left’ ,’top’ ,’bottom’。

• lens，默认值：true，若为false，则不在原图上显示镜头。

• imageOpacity，默认值：0.2，当zoomType的值为’reverse’时，这个参数用于指定遮罩的透明度。

• title，默认值：true，在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值。

• 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’，自定义加载提示文本。

PREVIOUS:
NEXT:
jQuery可编辑表格
原生js贪吃蛇