用戶登錄  |  用戶注冊
首 頁源碼下載網絡學院最新源碼源碼排行屏蔽廣告
當前位置:新興網絡 > 網絡學院 > 網頁制作 > CSS

純CSS實現圖片彈出顯示效果

減小字體 增大字體 作者:佚名  來源:本站整理  發布時間:2010-08-23 09:50:22
HTML code運行代碼復制代碼編輯
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Lightbox效果</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: white;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
     .com
{    width:500px;
    height:200px;
    background-color:#efefef;
    color:#666666;
    border-width:1px;
    border-color:#cccccc;
    border-style:solid;
    margin:6px;
    padding:6px;
    font-Size:14px;
    line-height:200%;
    float:midden;
   
}
    </style>
    </head>
    <body>
        <p class=com>
        lightbox效果網絡上有很多js版本的介紹。不過都下載一個lightbox的js小則幾十K,大則上百K。如果你只是需要一個類似Lightbox的效果,這種百分之百純CSS制造,不含js的辦法絕對值得你試試。點下圖看效果:<br />
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img  border="0" src="http://www.suasdey.com/img/450/5.jpg" width="120" height="63"></a>
        <div id="light" class="white_content">
            <a target="_blank" href="http://www.suasdey.com/">
            <img border="0" src="http://www.suasdey.com/img/450/5.jpg" width="360" height="190"></a> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">關閉</a></div>
            <div id="fade" class="black_overlay"></div></p>
    </body>
</html>

Tags:彈出層 純CSS 圖片 Lightbox

作者:佚名
  • 好的評價 如果您覺得此文章好,就請您
      0%(0)
  • 差的評價 如果您覺得此文章差,就請您
      0%(0)

網絡學院評論評論內容只代表網友觀點,與本站立場無關!

   評論摘要(共 0 條,得分 0 分,平均 0 分) 查看完整評論
秒速时时彩