图片放大镜

Posted 2020-10-04 小南瓜

css：jquery.jqzoom.css

插件：jquery.jqzoom-core.js

<a class="big" href="image/big.jpg">
    <img src="image/small.jpg"/>
</a>
//编写脚本
$(".big").jqzoom();

配置参数：

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

zoomWidth，默认值：2000，放大窗口的宽度

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

preloadPosition，默认值：‘center’，加载提示的位置，值也可以为‘bycss’，以通过css指定位置