欧美在线一区二区三区,成人精品在线,久久窝

純CSS制作的網(wǎng)頁中的lightbox效果

天極網(wǎng) 2007/12/1 21:57:27 深山行者字體:大中小瀏覽 10603

“Lightbox”是一個別致且易用的圖片顯示效果，它可以使圖片直接呈現(xiàn)在當前頁面之上而不用轉到新的窗口。lightbox效果網(wǎng)絡上有很多js版本的介紹。不過都下載一個lightbox的js小則幾十K，大則上百K。如果你只是需要一個類似Lightbox的效果，這種百分之百純CSS制造，不含js的辦法倒是可以試試。

以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>純CSS Lightbox效果</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            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;
        }
    </style>
    </head>
    <body>
        <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>

前一頁:巧妙運用CSS樣式表立刻改變鼠標的樣式

后一頁:css里expression實現(xiàn)界面對象的批量控制

相關閱讀: [轉]javascript緩沖效果; 中國青島春秋國際旅行社有限公司; 微信小程序直播組件live-player-plugin（wx2b03c6e691cd7370）; windows8的iis7應用程序池標識問題; 網(wǎng)站改進中; 另類的title提示文字; uni-app跨端開發(fā)微信小程序時頁面棧超過10層時小程序像卡死一樣假性不能點擊無法跳轉的解決方案; 設為首頁代碼

共有0條關于《純CSS制作的網(wǎng)頁中的lightbox效果》的評論: 發(fā)表評論

正在加載評論......

返回頂部發(fā)表評論

呢稱:
表情:
內容:	評論內容:不能超過 1000 字,需審核,請自覺遵守互聯(lián)網(wǎng)相關政策法規(guī)。
驗證碼:

網(wǎng)友評論聲明,請自覺遵守互聯(lián)網(wǎng)相關政策法規(guī)。

您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發(fā)布國家法律、法規(guī)明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發(fā)布內容擁有處置權。

更多信息>>欄目類別選擇: 百度小程序開發(fā); 微信小程序開發(fā); 微信公眾號開發(fā); uni-app; asp函數(shù)庫; ASP; DIV+CSS; HTML; python

更多>>同類信息: jquery設置或獲取修改classname; 利用css3.0寫出一個音樂播放的唱片碟盤的效果; 利用css中的scale()實現(xiàn)放大縮小效果; 利用background-color:#000000a8在背景顏色16進制代碼之后加字母加上數(shù)字讓背景色透明; css背景使用base64編碼或者將base64編碼放在img圖片標簽中; 利用css3中的-webkit-font-smoothing把網(wǎng)頁文字的毛邊去掉

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動端自動化測試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來做投票; 火狐Mozilla Firefox出現(xiàn)：無法載入您的Firefox配置文件它可能已經丟失或是無法訪問問題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過代碼修改pip下載源讓下載庫飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機抽取信息: jquery中動態(tài)生成的代碼使用on hover事件時不出現(xiàn)效果; 把網(wǎng)頁中的電話號碼生成圖片的ASP程序; 防止 IE 瀏覽器被黑的技巧十則; 淺談 Vista系統(tǒng)設置IIS7攻略; 鹽城市航空假日旅行社有限公司; 深山行者留言系統(tǒng)V3.3發(fā)布

更多標簽熱門標簽

小偷工作室十字展示文字垂直 126 評論 time 火狐 dt 幻燈腳本 Response cpu 字節(jié)數(shù) 逗號 ie 版權 imprt 翻轉 filter table 2.0 叛斷文件大小位置 clear 滑輪人生 Application 結果優(yōu)化閉合縮小緩沖 CSS規(guī)范輪流 height 省略教程排版背景多選調節(jié) 青春源碼比例 DOCTYPE JavaScript實現(xiàn)文本框提示效果管理

99热热热_国产成人自拍一区_欧美一级网站_99热在线播放_国产精品乱码一区二区三区_久久精品国产一区二区三区

純CSS制作的網(wǎng)頁中的lightbox效果