插件下载:http://www.jb51.net/jiaoben/29216.html 官方下载:http://www.mind-projects.it/projects/jqzoom/
1、<link href="css/jqzoom.css" rel="stylesheet" /> <!--引入jqzoom的css样式-->
2、<script src="scripts/jquery-1.7.1.min.js"></script> <!--先引入jquery-->
3、<script src="scripts/jquery.jqzoom.js"></script> <!--再引入jqzoom.js插件-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jqzoom图片放大镜插件</title>
<link href="css/jqzoom.css" rel="stylesheet" /> <!--引入jqzoom的css样式-->
<script src="scripts/jquery-1.7.1.min.js"></script> <!--先引入jquery-->
<script src="scripts/jquery.jqzoom.js"></script> <!--再引入jqzoom.js插件-->
<script>
$(function () {
$('.jqzoom').jqueryzoom({
xzoom: 400, //放大图的宽度(默认是 200)
yzoom: 400, //放大图的高度(默认是 200)
offset: 10, //离原图的距离(默认是 10)
position: "right", //放大图的定位(默认是 "right")
preload: 1
});
});
</script>
</head>
<body>
<div class="jqzoom">
<img src="images/image_small.jpg" alt="" jqimg="images/image_big.jpg">
</div>
</body>
</html>