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';用以控制“关闭”按钮的图片来源。

    下载

    lightbox.js - Javascript主文件
    lightbox.css - “图片层”样式文件
    overlay.png - 80% 透明度PNG图片,用以实现阴影效果
    loading.gif - “Loading”图片
    close.gif - “关闭” 按钮

  • 相关阅读:
    msf提权命令/meterpreter下的几个命令
    ms17010漏洞复现-2003
    复现IIS6.0远程命令执行漏洞
    代码审计之Finecms任意文件下载漏洞
    逻辑运算符
    RIP动态路由的配置
    跟着百度学习php之ThinkPHP的运行流程-2
    静态路由配置
    跟着百度学习php之ThinkPHP的运行流程-1
    外挂是怎么写的?
  • 原文地址:https://www.cnblogs.com/MaxIE/p/358440.html
Copyright © 2011-2022 走看看