参考地址：http://www.mind-projects.it/blog/jqzoom_v10
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" alt="shoe" jqimg="images/shoe4_big.jpg"></div>
4) 页面加载
$(document).ready(function(){
$(".jqzoom").jqueryzoom();
});
你也可以指定一些参数
$(document).ready(function(){
$(".jqzoom").jqueryzoom({
xzoom: 300, //zooming div default width(default width value is 200)
yzoom: 300, //zooming div default width(default height value is 200)
offset: 40, //zooming div default offset(default offset value is 10)
position: "right", //zooming div position(default position value is "right")
preload: 1 , // preload of images :1 by default
lens:1 // lens over the image 1 by default
});
});
EG：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>http://www.mind-projects.it/blog/jqzoom_v10</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jqzoom.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".jqzoom").jqueryzoom({
xzoom: 300,
yzoom: 300,
offset: 10,
position: "right",
preload:1,
lens:1
});
});
</script>
<link href="css/jqzoom.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrapper" >
<div id="maincontent">
<div style="float:left;width:100%;clear:both;" >
<div style='float:left;width:100%;'>
<div class="jqzoom" style='margin-right:5px;float:left;'>
<img src="images/shoe2_small.jpg" alt="scarpa" jqimg="images/shoe2_big.jpg">
</div>
</div>
<p>Inside a container with position:relative</p>
<div style="border:1px solid #CCCCCC;padding:50px;float:left;clear:both;width:80%;margin-bottom:10px;">
<div class="jqzoom"><img src="images/triumph_small.jpg" alt="macchina" jqimg="images/triumph.jpg"></div>
</div>
<div style="float:left;width:100%;clear:both;">
<div class="jqzoom"><img src="images/mustang_small.jpg" alt="scarpa" jqimg="images/mustang.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
posted on 2009-08-04 21:47
qinhaijun 阅读(377)
评论(0) 编辑 收藏 网摘