jQuery的zoom插件如何设置

jQuery的zoom插件如何设置图片上Zoom的位置,让其显示在右下角,或者取消... jQuery的zoom插件如何设置图片上Zoom的位置,让其显示在右下角,或者取消 展开
 我来答
保谷枫75
推荐于2016-06-16 · TA获得超过692个赞
知道小有建树答主
回答量:444
采纳率:100%
帮助的人:216万
展开全部

我这里有个附加demo 和含文档说明的!例子!希望可以帮助你


jQuery Cloud Zoom:图片放大镜插件 我爱模板推荐

jQuery Cloud Zoom:图片放大镜插件。想要类似淘宝、京东产品展示图片放大效果么,Cloud Zoom是一款不错的选择。它相对于Magic Zoom,体积更小,只有6KB,而且免费,效果却并不比它差;而与jQZoom插件比较,它体积也小了不少,并且兼容性更强,就目前测试的浏览器看,完美兼容IE6+, Firefox, Chrome, Opera, Safari。它还有着色,软聚焦和内变焦功能。总之很强大,谁用谁知道。


使用方法:

1、在head引入my.css文件

<link rel="stylesheet" type="text/css" href="cloud-zoom.css" />

<script type="text/javascript" src="/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="cloud-zoom.1.0.2.min.js"></script>


2、在body引入下面的代码:

<a class="cloud-zoom" id="zoom1" href="images/bigimage00.jpg" rel="adjustX: 10, adjustY:-4, softFocus:true"><img src="images/smallimage.jpg" title="Optional title display" alt="" /></a>

<a href='images/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'

rel="useZoom: 'zoom1', smallImage: 'images/smallimage.jpg' ">

<img src="images/tinyimage.jpg" alt = "Thumbnail 1"/></a>

<a href='images/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'

rel="useZoom: 'zoom1', smallImage: 'images/smallimage-1.jpg'">

<img src="images/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>

<a href='images/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'

rel="useZoom: 'zoom1', smallImage: 'images/smallimage-2.jpg' ">

<img src="images/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>


3、参数说明:

参数 描述 (from V1.0.0) 默认值

zoomWidth 设置缩放窗口的宽度,如果设置为"auto"则窗口宽度与小图片宽度相等。 'auto'

zoomHeight 设置缩放窗口的高度,如果设置为"auto"则窗口高度与小图片高度相等。 'auto'

position 指定缩放窗口相对于小图片的位置。允许的值是 'left', 'right', 'top', 'bottom', 'inside' ,也可以是专门一个HTML元素的ID放置例如窗口的缩放位置:'element1' 'right'

adjustX 允许你微调像素的缩放窗口的X位置。 0

adjustY 允许你微调像素的缩放窗口的Y位置。 0

tint 指定覆盖的小图片的颜色。颜色应指定十六进制格式,例如'#aa00aa'。 false

tintOpacity 指定色彩的透明度,其中0是完全透明的,1是完全不透明。 0.5

lensOpacity 设置镜头鼠标指针的透明度,其中0是完全透明的,1是完全不透明。在色彩和软对焦模式,它将始终是透明的。 0.5

softFocus 适用于一种微妙的模糊效果来的小图片。设置为true或false。 false

smoothMove 形象的漂移缩放,数字越高,就越顺畅/更轻松进行漂移运动。 1 =不平滑。 3

showTitle 是否显示图片的标题. true

titleOpacity 指定是否显示标题不透明度,其中0是完全透明的,1是完全不透明。 0.5




推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式