图片放大镜

             

第一步: 引用js脚本 和 插件

   <script src="jquery.js"></script>

   <script src="jquery.JNMagnifier.js"></script>

第二步:设置图片

  <div id="ShowPictureBox">

        <img src="2011111614473078125001746.jpg" width="200" height="200" />

    </div>

    <div id="ShowBigPictureBox" style="position:absolute; top:20px; left:250px;overflow:hidden; display:none; border:3px solid #ccc; padding:5px; background-repeat:no-repeat; background-color:#fff; width:300px; height:300px;">

    </div>

 position:absolute;绝对位置

 overflow:hidden;清除浮动

 display:none；隐藏div中的元素

 background-repeat:no-repeat不重复背景图片

第三步：js控制

<script>

        $(document).ready(function () { $("#ShowPictureBox").JNMagnifier({ renderTo: "#ShowBigPictureBox" }); });

 </script>