关于Jqzoom的使用心得 jquery放大镜效果插件

  下面是完整的代码 jqzoom打包下载地址

  

复制代码 代码如下:

  <html>

  <head>

  <title>JQzoom Demo</title>

  <script src="../js/jquery-1.3.2.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">

  <style type"text/css">

  div.notes{

  font-size:12px;

  }

  div.notes a{

  color:#990000;

  }

  </style>

  <script type="text/javascript">

  $(function() {

  $(".jqzoom").jqzoom();

  });

  </script>

  </head>

  <body>

  <div id="content" style="margin-top:100px;margin-left:100px;">

  <a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">

  <img src="kawasakigreen_small.jpg" title="kawasakigreen" style="border: 1px solid #666;">

  </a><select style="position:absolute;left:400px;top:10px;"><option>sdsdsds</option></select>

  <br>

  <div class="notes">

  <small>created by Renzi Marco</small>

  <a href="http://www.mind-projects.it/projects/jqzoom/contact.php">Hire me</a><br>

  <a href="http://www.mind-projects.it/projects/jqzoom">view all Demos</a>

  </div>

  </div>

  </body></html>

  下面主要演示Jqzoom的方法!推荐一下!

  

复制代码 代码如下:

  <script type="text/javascript">

  window.onload = function() {

  $(".jqzoom").jqueryzoom({

  xzoom: 250, //设置放大 DIV 长度(默认为 200)

  yzoom: 250, //设置放大 DIV 高度(默认为 200)

  offset: 10, //设置放大 DIV 偏移(默认为 10)

  position: "right", //设置放大 DIV 的位置(默认为右边)

  preload: 1,

  lens: 1

  });

  }

  </script>