JQzoom插件使用
太叔超英
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="JQuery/JQzoom/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="JQuery/JQzoom/js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link href="JQuery/JQzoom/css/jqzoom.css" rel="stylesheet" />
</head>
<body>
<style type="text/css">
#a1 {
margin-left:700px;
}
</style>
<!-- 一个a标签内含一个img标签 -->
<a href="images/JQzoom.jpg" title="这是一张图片" id="a1">
<img src="images/JQzoom-1.jpg" title="这是一张图片" />
</a>
<script type="text/javascript">
$(function () {
//选中a标签直接调用jqzoom()方法即可
//$("#a1").jqzoom();
$("#a1").jqzoom({
zoomWidth: 300, //放大图的宽度(默认是 200)
zoomHeight: 250, //放大图的高度(默认是 200)
offset: 10, //离原图的距离(默认是 10)
position: "left", //放大图的定位(默认是 "right")
preload: 1
}
);
});
</script>
</body>
</html>
类似资料：