jquery图片放大功能简单实现

复制代码 代码如下:

  <div class="jqzoom">

  <img src="http://bfbnews.tw/images/test.jpg" id="bigImg" style="width:500px;height:300px;" jqimg="http://bfbnews.tw/images/test.jpg">

  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

  <style type="text/css">

  body{margin:0px;}

  div.zoomdiv {

  z-index: 999;

  position : absolute;

  top:0px;

  left:0px;

  width : 200px;

  height : 200px;

  background: #ffffff;

  border:1px solid #CCCCCC;

  display:none;

  text-align: center;

  overflow: hidden;

  }

  div.jqZoomPup {

  z-index : 999;

  visibility : hidden;

  position : absolute;

  top:0px;

  left:0px;

  width : 50px;

  height : 50px;

  border: 1px solid #aaa;

  background: #ffffff;

  opacity: 0.5;

  -moz-opacity: 0.5;

  -khtml-opacity: 0.5;

  filter: alpha(Opacity=50);

  }

  </style>

  <script type="text/javascript">

  $(document).ready(function(){

  $(".jqzoom").jqueryzoom({

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

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

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

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

  preload:1,

  lens:true

  });

  });

  </script>

  <!--{include file="jqzoom_js.html"}-->