点击图片放大效果
下载包
三种效果:
①操作按钮位于顶部②操作接钮位于顶部③大图放开后,周围是半透色黑色遮罩(highslide-define.js中修改)
第一步:将Js目录上传
第二步:在Skin/模板名/Master.html主框架模式页的<head></head>之前放置如下代码
<script type="text/javascript" src="/Js/zoomin/highslide-with-gallery.js"></script>
<script type="text/javascript" src="/Js/zoomin/highslide-define.js"></script>
<link type="text/css" href="/Js/zoomin/highslide.css" rel="stylesheet" />
第三步:在Skin/模板名/Product/Product.html产品介绍页面,图片引用的格式如下
<div class="highslide-gallery">
<a onclick="return hs.expand(this)" class="highslide" href="/Prod_Images/LRC-2000M.jpg">
<img border="0" title="Click Picture Zoom In" alt="" src="/Prod_Images/LRC-2000M_thumb.jpg" /></a>
<div class="highslide-heading">产品说明文字,位于顶部左边</div>
...
...
</div>
案例如下:
<div class="highslide-gallery">
<a onclick="return hs.expand(this)" class="highslide" href="">
<img border="0" title="Click Picture Zoom In" alt="" src="" /></a>
<div class="highslide-heading"></div>
</div>
如果需要说明文字位于图片底部,则
<div class="highslide-heading"> 改为 <div class="highslide-caption">
需要说明的问题:
在ie6或低版本ff下的问题(在本地浏览可能正常)①png的背景边框可能不透明②遮罩效果会看不到。
三种效果:
①操作按钮位于顶部②操作接钮位于顶部③大图放开后,周围是半透色黑色遮罩(highslide-define.js中修改)
第一步:将Js目录上传
第二步:在Skin/模板名/Master.html主框架模式页的<head></head>之前放置如下代码
<script type="text/javascript" src="/Js/zoomin/highslide-with-gallery.js"></script>
<script type="text/javascript" src="/Js/zoomin/highslide-define.js"></script>
<link type="text/css" href="/Js/zoomin/highslide.css" rel="stylesheet" />
第三步:在Skin/模板名/Product/Product.html产品介绍页面,图片引用的格式如下
<div class="highslide-gallery">
<a onclick="return hs.expand(this)" class="highslide" href="/Prod_Images/LRC-2000M.jpg">
<img border="0" title="Click Picture Zoom In" alt="" src="/Prod_Images/LRC-2000M_thumb.jpg" /></a>
<div class="highslide-heading">产品说明文字,位于顶部左边</div>
...
...
</div>
案例如下:
<div class="highslide-gallery">
<a onclick="return hs.expand(this)" class="highslide" href="">
<img border="0" title="Click Picture Zoom In" alt="" src="" /></a>
<div class="highslide-heading"></div>
</div>
如果需要说明文字位于图片底部,则
<div class="highslide-heading"> 改为 <div class="highslide-caption">
需要说明的问题:
在ie6或低版本ff下的问题(在本地浏览可能正常)①png的背景边框可能不透明②遮罩效果会看不到。