jQuery 图片放大镜效果插件:jQZoom

在一些产品演示网站,常常需要这样的效果,把鼠标移到小图的上面,旁边出现这这部分的放大效果,通过这种方式让用户能够详细了解产品的细节。

jQZoom 就是这样的一个 jQuery 插件,它能够让你网站的图片实现放大镜效果,把鼠标移到小图上,旁边出现大图的局部放大的部分,如下演示:

jQZoom 演示

RSS 用户需要返回页面才能看到效果。

jQZoom 使用说明

下面介绍下简单使用:

1. 加载 jqzoom.css

2. 加载 jQzoom 和 jQuery JS 库:

3. 通过下面的方式来创建 jQZoom 的 HTML 代码。

<a href="images/BIGIMAGE.JPG" class="jqzoom" title="MYTITLE">
	<img src="https://cdn.wpjam.com/qiniu/1542/image/e9d37a1b0a3cbe2413eab92df0e462e4.jpg" title="IMAGE TITLE">
</a>

其中:
SMALLIMAGE.JPG: 小图
BIGIMAGE.JPG: 大图,注意小图一定要是大图的缩略图。
MYCLASS: 后面用来查找需要实现 jQZoom 效果的元素。
MYTITLE/IMAGE TITLE: A 标题的标题或者图片的标题,将会用在放大之后图片的标题。

4. 当页面导入的时候,载入 jQZoom 插件。

$(document).ready(function(){
	$(".jqzoom").jqueryzoom();
});

基本设置好了,当然你也可以自己做些简单的设置:

$(document).ready(function(){
	var options = {
            zoomType: 'standard',
            lens:true,
            preloadImages: true,
            alwaysOn:false,
            zoomWidth: 300,
            zoomHeight: 250,
            xOffset:90,
            yOffset:30,
            position:'left'
            //...MORE OPTIONS
	};
	$('.MYCLASS').jqzoom(options);
});

下载:jQZoom
演示:jQuery 图片放大镜效果插件:jQZoom


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。