大家好，首先欢迎来到我（）的博客！
图片放大镜的最终效果，如下图:


   注意：当属标放到左侧图片上时，右侧：就会出现 .....


1> HMTL 的核心代码如下：

<a href="images/kawasakigreen.jpg" class="jqzoom" style="" title="大图片标题">
 <img src="images/kawasakigreen_small.jpg"  title="kawasakigreen" style="border: 1px solid #666;">
</a>

2> 引入jquery类库和 JQZoom 插件、 JQZoom样式。

<script src="js/jquery-min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">

3> 作用juqery插件实现效果


<script type="text/javascript">

$(function() {
    $(".jqzoom").jqzoom(options);
});

var options = {
        zoomWidth  : 300,  //放大图的宽度(默认是 200)
        zoomHeight : 200,  //放大图的高度(默认是 200)
        xOffset    : 10,  //离原图的距离(默认是 10)
        yOffset    : 0,   //离原图的距离(默认是 10)
        position   : "right",    // values:'right' ,'left' ,'top' ,'bottom'
        title      : true,       // 标题是否显示 
        lens       : true,       // 里面的小的属标指向区域是否显示
        showEffect : "fadein",   // 右侧大图片的显示效果  'show' ,'fadein'.  默认是：show
        hideEffect : "hide",     // 右侧大图片的显示效果  'hide' ,'fadeout'. 默认是：hide
        fadeinSpeed : "slow",   //速度参数(options: 'fast','slow','medium')
        fadeoutSpeed : "fast",
};

</script>


其实上面一段也可以缩写成下面:

<!--
上面代码等同于下面
$(function() {
    $(".jqzoom").jqzoom({
   
        zoomWidth  : 300,  //放大图的宽度(默认是 200)
        zoomHeight : 200,  //放大图的高度(默认是 200)
        xOffset    : 10,  //离原图的距离(默认是 10)
        yOffset    : 0,   //离原图的距离(默认是 10)
        position   : "right",    // values:'right' ,'left' ,'top' ,'bottom'
        title      : true,       // 标题是否显示 
        lens       : true,       // 里面的小的属标指向区域是否显示
        showEffect : "fadein",   // 右侧大图片的显示效果  'show' ,'fadein'.  默认是：show
        hideEffect : "hide",     // 右侧大图片的显示效果  'hide' ,'fadeout'. 默认是：hide
        fadeinSpeed : "slow",   //速度参数(options: 'fast','slow','medium')
        fadeoutSpeed : "fast",
   
    });
});
-->

OK，完成。不会与我联系()

请想在这里学习的朋友，先注册一个新浪博客，并在我的点--"xx我"