当前位置:首页 > javascript(jquery)实现图片放大镜效果

javascript(jquery)实现图片放大镜效果

点击次数:1847  更新日期:2011-01-05
\n

本例中主要用到了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