自适应网站建设方案seo专员是做什么的
xZoom是一款多功能的jquery图片预览放大镜插件。它支持多种图片放大模式，可以和Fancy Box或Magnific Pop-up等插件结合使用，功能非常强大。
在线预览 下载
使用方法
在页面中引入jquery和xzoom.css以及xzoom.js文件。
<link rel="stylesheet" href="css/xzoom.css">
<script src="jquery.min.js"></script>
<script src="js/xzoom.min.js"></script>
HTML结构
xZoom要求使用下面的基本HTML结构，你可以按自己的需求设置图片的数量。
<img class="xzoom" src="path/to/preview_image_01.jpg" xoriginal="path/to/original_image_01.jpg" /><div class="xzoom-thumbs"><a href="path/to/original_image_01.jpg"><img class="xzoom-gallery" width="80" src="path/to/thumbs_image_01.jpg" xpreview="path/to/preview_image_01.jpg"></a><a href="path/to/original_image_02.jpg"><img class="xzoom-gallery" width="80" src="path/to/preview_image_02.jpg"></a><a href="path/to/original_image_03.jpg"><img class="xzoom-gallery" width="80" src="path/to/preview_image_03.jpg"></a><a href="path/to/original_image_04.jpg"><img class="xzoom-gallery" width="80" src="path/to/preview_image_04.jpg"></a>
</div>
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化xZoom插件。
$(".xzoom").xzoom();
配置参数
xZoom图片放大镜插件的可用配置参数如下：
| 属性 | 默认值 | 描述 |
| position | right | 图片放大窗口的位置。可用值有："top", "left", "right", "bottom", "inside", "lens", "#ID"。 |
| rootOutput | true | 该参数可以将输出的放大窗口设置在任何位置。 |
| Xoffset | 0 | 图片放大窗口水平位置的偏移。 |
| Yoffset | 0 | 图片放大窗口垂直位置的偏移。 |
| fadeIn | true | 显示放大图片是否使用淡入效果。 |
| fadeTrans | true | 淡入淡出效果的过渡时间。 |
| fadeOut | false | 关闭放大图片是否使用淡出效果。 |
| smoothZoomMove | 3 | 在大窗口中图片的平滑移动级别，数值越大越平滑。 |
| smoothLensMove | 1 | 圆形镜片的平滑移动级别。 |
| smoothScale | 6 | 放大缩小的平滑级别。 |
| defaultScale | 0 | 放大图片打开时的默认放大级别。-1表示-100%，1表示100%。 |
| scroll | true | 是否在滚动鼠标滚轮时放大缩小图片。 |
| tint | false | 背景颜色。建议使用十六进制的颜色值。 |
| tintOpacity | 0.5 | 背景的透明度，值在0-1之间。 |
| lens | false | 放大镜的颜色，建议使用十六进制的颜色值。 |
| lensOpacity | 0.5 | 放大镜的透明度。 |
| lensShape | box | 放大镜的的形状，"box" 或 "circle"。 |
| zoomWidth | auto | 放大镜的宽度，单位像素。 |
| zoomHeight | auto | 放大镜的高度，单位像素。 |
| sourceClass | xzoom-source | 原图div的class名称。 |
| loadingClass | xzoom-loading | 预加载div的class名称。 |
| lensClass | xzoom-lens | 放大镜div的class名称。 |
| zoomClass | xzoom-preview | 放大窗口div的class名称。 |
| activeClass | xactive | 当前缩略图的class名称。 |
| adaptive | true | 是否开启自适应功能。 |
| lensReverse | false | 当旋转内部放大镜并且该选项为true时，放大镜的移动和显示方向相反。 |
| adaptiveReverse | false | 和lensReverse相同，但是只有在adaptive选项为true是有效。 |
| title | false | 是否在输出窗口中显示图片标题。 |
| titleClass | xzoom-caption | 图片标题div的class名称。 |
| bg | false | 放大图片作为背景输出。 |