jQuery实现图片局部放大镜效果_jquery

2020-11-27 来源：好走旅游网

下图只是给大家举个例子，类似于这种效果图：

具体实现过程请看下文代码：

css

.zoomPad{
position:relative;
float:left;
z-index:99;
cursor:crosshair;
}
.zoomPreload{
-moz-opacity:0.8;
opacity: 0.8;
filter: alpha(opacity = 80);
color: #333;
font-size: 12px;
font-family: Tahoma;
text-decoration: none;
border: 1px solid #CCC;
padding: 8px;
text-align:center;
background-image: url(../images/zoomloader.gif);
background-repeat: no-repeat;
background-position: 43px 30px;
z-index:110;
width:90px;
height:43px;
position:absolute;
top:0px;
left:0px;
* width:100px;
* height:49px;
}
.zoomPup{
overflow:hidden;
-moz-opacity:0.6;
opacity: 0.6;
filter: alpha(opacity = 60);
z-index:120;
position:absolute;
border:1px solid #CCC;
z-index:101;
cursor:crosshair;
}
.zoomOverlay{
position:absolute;
left:0px;
top:0px;
/*opacity:0.5;*/
z-index:5000;
width:100%;
height:100%;
display:none;
z-index:101;
}
.zoomWindow{
position:absolute;
left:110%;
top:40px;
z-index:6000;
height:auto;
z-index:10000;
z-index:110;
}
.zoomWrapper{
position:relative;
border:1px solid #999;
z-index:110;
}
.zoomWrapperTitle{
display:block;
background:#999;
color:#FFF;
height:18px;
line-height:18px;
width:100%;
overflow:hidden;
text-align:center;
font-size:10px;
position:absolute;
top:0px;
left:0px;
z-index:120;
-moz-opacity:0.6;
opacity: 0.6;
filter: alpha(opacity = 60);
}
.zoomWrapperImage{
display:block;
position:relative;
overflow:hidden;
z-index:110;
}
.zoomWrapperImage img{
border:0px;
display:block;
position:absolute;
z-index:101;
}
.zoomIframe{
z-index: -1;
filter:alpha(opacity=0);
-moz-opacity: 0.80;
opacity: 0.80;
position:absolute;
display:block;
}
/*********************************************************
/ When clicking on thumbs jqzoom will add the class
/ "zoomThumbActive" on the anchor selected
/*********************************************************/

还需要有Jquery.js

使用方法：

1.当页面导入的时候，载入 jQZoom 插件。

2.创建一个放图片的容器，指定一个a标记用于显示放大后的图片的一部分：

下面给一些基本的配置参数：

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

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

样式的个性化当然也可以直接修改jqzoom.css文件。

显示全文

全部栏目

jQuery实现图片局部放大镜效果_jquery