<HTML>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<link href="jqzoom.css" type="text/css" rel="stylesheet" />
<SCRIPT src="jquery.js" type="text/javascript"></SCRIPT>
<SCRIPT src="jquery.jqzoom.js"></SCRIPT>
<SCRIPT type=text/javascript>
jQuery.noConflict();
//*
jQuery(document).ready(
function(){
jQuery("#zoom_div").QuluZoom(
{
xzoom: 150, //zoomed width
yzoom: 150,
offset: 0,
position: "right",
orgDivId:"#zoom_div",
zoonimgId:"img.jqzoom"
}
);
}
);
//*/
//*
jQuery(document).ready(
function(){
jQuery("#zoom_div2").QuluZoom(
{
xzoom: 150, //zoomed width
yzoom: 150,
offset: 0,
position: "right",
orgDivId:"#zoom_div2",
zoonimgId:"img.jqzoom2"
}
);
}
);
//*/
</SCRIPT>
<BODY>
<table width="100%">
<tr>
<td colspan="2">
<p>滚动位置 放大值:<span id="x"></span> Y:<span id="y"></span><br/>
原始图 X:<span id="imgx"></span>
原始图 Y:<span id="imgy"></span><br/>
原始图 最大XY:<span id="imgMaxXY" style="color:blue"></span>
固定原始图 最大XY:<span id="imgMax-XY" style="color:red"></span>
is ie:<span id="isie"></span><br/>
缩放比例 :<span id="scaleXY"></span><br/>
滚动位置 :<span id="scrollXY"></span><br/>
放大镜位置 :<span id="lenser"></span><br/>
mouseXY :<span id="mouseXY"></span>
放大镜背景位置 :<span id="mouseXY-Imgleft" style="color:red"></span></p>
<br>
<br>
</td>
</tr>
<tr>
<td width="15%">
anyplace
</td>
<td width="85%">
<!-- zoom start -->
<div id = "zoom_div2"><IMG class="jqzoom2"
lowalt="321_P_1287644640230.jpg"
width="250"
src="321_P_1287644640230.jpg"
border="1" /></div>
<!-- lowalt is big image,src is small image -->
<!-- zoom end -->
</td>
</tr>
<tr>
<td width="15%">
<br>
<br>
<br>
<br>
<br>
</td>
<td colspan="2">
<!-- <p>滚动位置 放大值:<span id="x"></span> Y:<span id="y"></span><br/>
原始图 X:<span id="imgx"></span>
原始图 Y:<span id="imgy"></span><br/>
原始图 最大XY:<span id="imgMaxXY" style="color:blue"></span>
固定原始图 最大XY:<span id="imgMax-XY" style="color:red"></span>
is ie:<span id="isie"></span><br/>
缩放比例 :<span id="scaleXY"></span><br/>
滚动位置 :<span id="scrollXY"></span><br/>
放大镜位置 :<span id="lenser"></span><br/>
mouseXY :<span id="mouseXY"></span>
放大镜背景位置 :<span id="mouseXY-Imgleft" style="color:red"></span></p>
<br>-->
<br></td>
</tr>
<tr>
<td width="15%">
anyplace
</td>
<td width="85%">
<!-- zoom start -->
<div id = "zoom_div"><IMG class="jqzoom"
lowalt="14.jpg"
width="250"
src="14.jpg"
border="1" /></div>
<!-- lowalt is big image,src is small image -->
<!-- zoom end -->
</td>
</tr>
</table>
</BODY>
</HTML>
JavaScript 图片圆形放大镜
需积分: 10 85 浏览量
2011-06-14
23:22:38
上传
评论
收藏 280KB RAR 举报
magnifier-Qulu.rar （12个子文件） 
magnifier-Qulu 
lenseringie.png 4KB lensering1.png 7KB
jqzoom.css.bak 600B jquery.jqzoom.js 9KB
321_P_1287644640230.jpg 49KB index.html.bak 3KB Thumbs.db 19KB jquery.jqzoom.js.bak 9KB 14.jpg 203KB jqzoom.css 569B jquery.js 20KB
index.html 3KB资源评论
