本例中主要用到了jquery.js,jquery.jqzoom.js以及样式jqzoom.css,
为了演示方便,这里引用了一个购物网站的绝对路径,大家可以把jquery代码下过来自己用 .
应用参考:http://www.vancl.com/ProductInfo/1120222.html
img标签中的
alt是大图片的路径,
src是小图片的路径,
class=jqzoom,设置样式,
border=0图片的边框。
下面的MM怎么样啊,呵呵!!!!
<
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: 280,
offset: 15,
position: "right"
});
});
</ SCRIPT >
< BODY >
< IMG class =jqzoom
alt =http://img.article.pchome.net/game/00/07/75/84/pic_lib/wm/424.jpg
src =http://t1.baidu.com/it/u=2111826760,700048667&fm=0&gp=6.jpg
border =0 >
</ BODY >
</ 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: 280,
offset: 15,
position: "right"
});
});
</ SCRIPT >
< BODY >
< IMG class =jqzoom
alt =http://img.article.pchome.net/game/00/07/75/84/pic_lib/wm/424.jpg
src =http://t1.baidu.com/it/u=2111826760,700048667&fm=0&gp=6.jpg
border =0 >
</ BODY >
</ HTML >