Code

图片放大镜效果

这是一个基于jQuery的图片放大镜效果,鼠标放到图片上,旁边会对图片的局部位置进行放大。一般用于放大查看商品图片,在凡客,京东商城,阿里巴巴等都有类似的效果。好处是能在原图附近对图片进行局部放大查看,而且可以通过鼠标控制查看的部位。

大图片命名格式:demo.jpg

小图片命名格式:demo_small.jpg

(小图片的名称是在大图片的名称上加"_small")

效果预览-1(默认效果)
$(".jqzoom").jqzoom();
效果预览-2(鼠标放到小图片的时候没有遮罩效果,并且不显示标题。)
            
var options3 =
{
    zoomWidth: 200,
    zoomHeight: 200,
    xOffset: 20,
    title: false,
    lens:false

}

$(".jqzoom3").jqzoom(options3);


效果预览-3(弹出窗口偏移效果。)

var options4 =
{

    zoomWidth: 300,
    zoomHeight: 200,
    position : 'right',
    yOffset :-100,
    xOffset :100,
    title :false


}
$(".jqzoom4").jqzoom(options4);
效果预览-4(弹出窗口渐隐。)

var options5 =
{
    zoomWidth: 250,
    zoomHeight: 250,
    showEffect:'show',
    hideEffect:'fadeout',
    fadeoutSpeed: 'slow',
    title :false
}
$(".jqzoom5").jqzoom(options5);
代码
1.在body里加入如下HTML代码:

<a href="images/kawasakigreen.jpg" class="jqzoom" title="kawasaki">
    <img src="images/kawasakigreen_small.jpg" title="kawasakigreen" class="a_imgBorder">
</a>


<!--内容说明-->
1.  a标签的href里放的是大图地址。
2.  这里a标签里class="jqzoom"并不是来定义样式的,而是为了能让jquery选择器找到这个标签,然后生成图片放大镜效果。
3.  a标签定义的title属性,即放大出来图片的标题。
4.  img标签内放的是小图地址。
5.  当a标签没有定义title属性的时候,img标签定义的title属性会来做为放大出来的图片标题。

2.在head里加入css:

<style type="text/css">
    div.jqZoomTitle
    {
	    z-index:5000;
	    text-align:center;
	    font-size:11px;
	    font-family:Tahoma;
	    height:16px;
	    padding-top:2px;
	    position:absolute;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    color: #FFF;
	    background: #999;

    }

    .jqZoomPup
    {
		    overflow:hidden;
		    background-color: #FFF;
		    -moz-opacity:0.6;
		    opacity: 0.6;
		    filter: alpha(opacity = 60);
		    z-index:10;
		    border-color:#c4c4c4;
		    border-style: solid;
		    cursor:crosshair;
    }

    .jqZoomPup img
    {
	    border: 0px;
    }

    .preload{
	    -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;
       background-color: white;
       padding: 8px;
	    text-align:center;
       background-image: url(../images/zoomloader.gif);
       background-repeat: no-repeat;
       background-position: 43px 30px;
	    width:90px;
	    * width:100px;
	    height:43px;
	    *height:55px;
	    z-index:10;
	    position:absolute;
	    top:3px;
	    left:3px;

    }

    .jqZoomWindow
    {
	    border: 1px solid #999;
	    background-color: #FFF;
    }

    .a_imgBorder{border: 1px solid #666;}
</style>

3.在head里引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jqzoom.js" type="text/javascript"></script>

4.继续在head里加入js代码:

<!--默认效果-->
<script type="text/javascript">
    $(document).ready(function() {
        $(".jqzoom").jqzoom();
    });
</script>


<!--效果2-->
<script type="text/javascript"> $(document).ready(function() { var options = { zoomWidth: 200, zoomHeight: 200, xOffset: 20, title: false, lens: false }; $(".jqzoom").jqzoom(options); }); </script> <!--效果3-->
<script type="text/javascript"> var options = { zoomWidth: 300, zoomHeight: 200, position: 'right', yOffset: -100, xOffset: 100, title: false } $(".jqzoom").jqzoom(options); </script> <!--效果4-->
<script type="text/javascript"> var options = { zoomWidth: 250, zoomHeight: 250, showEffect: 'show', hideEffect: 'fadeout', fadeoutSpeed: 'slow', title: false } $(".jqzoom").jqzoom(options); </script>
5.参数列表:
  • 参数名
    默认值
    说明
  • zoomType
    'standard'
    图片放大时,小图透明遮挡效果,两种可选值:'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
    是否显示标题。设置为false不显示标题。
  • showEffect
    'show'
    弹出窗口的显示时候的效果,可选值:'show' ,'fadein'.
  • hideEffect
    'hide'
    弹出窗口的消失时候的效果,可选值:'hide' ,'fadeout'.
  • fadeinSpeed
    'fast'
    弹出窗口的显示效果设置为:'fadein' 时候的显示速度。(可选值: 'fast','slow','medium')
  • fadeoutSpeed
    'slow'
    弹出窗口的消失效果设置为:'fadein' 时候的消失速度。(可选值: 'fast','slow','medium')
  • showPreload
    true
    是否可启预加载显示。(可选值: 'true','false')
  • preloadText
    'Loading zoom'
    设置预加载时候的显示的文本,当showPreload设置为true的时候生效。
  • preloadPosition
    'center'
    加载时候文本显示的位置。