点击图片放大效果

下载包


三种效果:
①操作按钮位于顶部②操作接钮位于顶部③大图放开后,周围是半透色黑色遮罩(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的背景边框可能不透明②遮罩效果会看不到。


编辑
  
达网旗下网站 2009-2014 版权所有  浙ICP备09074410号
网站优化加速的首选:i85纯静态优化建站系统
关键词:网站制作, 优化建站, 静态网站, 网站建设  站点地图 RSS订阅