zoukankan      html  css  js  c++  java
  • 新颖实用的显示图片效果

    Lightbox——新颖实用的显示图片效果

    “Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。文字表述显然不够明了,所以请先看一下 Lightbox 的演示页面。

    如何使用?

    Lightbox能非常简单地应用到您的页面上。首先将lightbox.js包含到您页面的header部分:

    <script src="lightbox.js" type="text/javascript"></script>

    将rel="lightbox"属性加入到任何有链接的标记里面用以激活Lightbox功能,例如:

     <a title="my caption" href="images/image-1.jpg" rel="lightbox">image #1</a>

    也许您注意到了上面那个例子中,当“打开”图片时会看到图片下面有一段说明文字。这是由title属性控制的。title属性是一个可选项,也就是说您可以不写,当然最好还是简短的说明一下比较好。

    怎样定制?

    可以使用CSS来对“图片层”进行修饰,在上面的那个示例页面中,我们采用了以下CSS代码:

    #lightbox{
        background-color:#eee;
        padding: 10px;
        border-bottom: 2px solid #666;
        border-right: 2px solid #666;
        }
        #lightboxDetails{
        font-size: 0.8em;
        padding-top: 0.4em;
        }
        #lightboxCaption{ float: left; }
        #keyboardMsg{ float: right; }
        #lightbox img{ border: none; }
        #overlay img{ border: none; }

    想要产生阴影效果的话,需要准备一张半透明的PNG图片和少许CSS。由于IE对PNG图形的糟糕支持(它不支持PNG透明)我们不得不针对它写更多的代码:

    #overlay{ background-image: url(overlay.png); }
        * html #overlay {
        background-color: #000;
        back\ground-color: transparent;
        background-image: url(blank.gif);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
        }

    lightbox.js有一句var loadingImage = 'loading.gif';它是用来控制图片完全加载之前的那个“Loading...”效果的,你可以使用任何来图片替代它。
    同样的,var closeButton = 'close.gif';用以控制“关闭”按钮的图片来源。

    下载

    /Files/studio313/lightbox.rar

  • 相关阅读:
    171. Excel Sheet Column Number (Easy)
    349. Intersection of Two Arrays (Easy)
    453. Minimum Moves to Equal Array Elements (Easy)
    657. Judge Route Circle (Easy)
    CSS笔记
    保存页面状态
    UI开发总结
    ubuntu 下配置munin
    反向代理配置
    JavaScript 高级程序设计第二版
  • 原文地址:https://www.cnblogs.com/studio313/p/346098.html
Copyright © 2011-2022 走看看