ecshop商品放大镜JS实现放大镜产品效果代码实例

<SCRIPT src="js/mz-packed.js" type=text/javascript></SCRIPT>

<!--商品图片和相册 start-->
<div class="imgInfo">
<!-- {if $pictures}-->
<a href="javascript:;" onclick="window.open('gallery.php?id={$goods.goods_id}'); return false;">
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
</a>
<!-- {else} -->
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
<!-- {/if}-->

<div id="show_pic" class="imgInfo" style="overflow: visible;">
<!--商品图片和相册 start-->
<!-- {if $pictures}-->
<A href="{$pictures.0.img_url}" id="goodsPic" class="MagicZoom" title=""  rel="selectors-effect:false;zoom-fade:true;thumb-change:mouseover;">
<img style="border:0px;padding:0;border:1px #CCCCCC solid" id="img_url" src="{$goods.goods_img}" width="420" height="420" /></A>
<!-- {else} -->
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}"/>
<!-- {/if}-->

<link href="MagicZoom.css" rel="stylesheet" type="text/css" />
<SCRIPT src="js/mz-packed.js" type=text/javascript></SCRIPT>