本例中主要用到了jquery.js,jquery.jqzoom.js以及样式jqzoom.css,
为了演示方便,这里引用了一个购物网站的绝对路径,大家可以把jquery代码下过来自己用 .
\n
应用参考:http://www.vancl.com/ProductInfo/1120222.html
\n
img标签中的
alt是大图片的路径,
src是小图片的路径,
class=jqzoom,设置样式,
border=0图片的边框。
\n
代码如下:
<HTML>
<META http-equiv=Content-Type content=”text/html; charset=utf-8″>
<link href=”http://www.vancl.com/css/jqzoom.css” type=”text/css” rel=”stylesheet” />
<SCRIPT src=”http://www.vancl.com/PublicControls/js/jquery.js” type=text/javascript></SCRIPT>
<SCRIPT src=”http://www.vancl.com/PublicControls/js/jquery.jqzoom.js”></SCRIPT>
<SCRIPT type=text/javascript>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(“img.jqzoom”).jqueryzoom({
xzoom: 280,
yzoom: 90,
offset: 15,
position: “right”
});
});
</SCRIPT>
\n
<BODY>
\n
<a href=”http://www.dwww.cn”><IMG class=jqzoom
alt=http://www.dwww.cn/images/shai_760_90.gif
src=http://www.dwww.cn/images/Indexlogo.gif
border=0 ></a>
</BODY>
\n
</HTML>
\n