Jquery jqzoom 放大镜

1.在页面中引入jqzoom.css 文件
    <link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2.在页面中引入jQzoom.js 和 jQuery.js 文件
<script type="text/javascript" src="your_path/jquery.js"></script>
<script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3.为图片创建一个容器，并给容器添加 jqzoom 属性，为每一个图片指定一个jqimg 属性，用来指向大图片的路径<div class="jqzoom"><img src="images/shoe4_small.jpg" mce_src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div> /*使用jqzoom*/ $(function(){ $(".jqzoom").jqueryzoom({ xzoom: 300, //放大图的宽度(默认是 200) yzoom: 300, //放大图的高度(默认是 200) offset: 10, //离原图的距离(默认是 10) position: "right", //放大图的定位(默认是 "right") preload:1 }); });

http://www.mind-projects.it/projects/jqzoom/