Zi 字媒體

在網路上常會看到許多當點擊後，四周畫面一黑，然後出現一些文字訊息方塊的特效 這種Lightbox Loading的效果，網路上有許多很完整的套件 但如果只是為了做個轉換的特效，可以自己快速做一個，不一定還要去引用其他套件 以下做個簡單的範例： HTML Loading...... CSS /* 黑底 */ #loading { z-index:10; background:#555; opacity: 0.5; position:absolute; top:0; } /* message */ #loading .wait-message { z-index:11; width:300px; height:50px; background:#000; position:absolute; text-align:center; border-radius:10px; color:#FFF; font-size:18px; padding-top:10px; } jQuery ('#loading').css({width:(window).width(),height:2300}); var wait_message = ('#loading .wait-message'); //以高為例，(瀏覽器高度 - 訊息區塊高度 / 2) + 捲軸上方高度 //用Math.max()避免負數(如果負數就取0) wait_message.css({ top : Math.max(0,((window).height() - wait_message.outerHeight()) / 2 + (window).scrollTop()) + 'px', left : Math.max(0,((window).width() - wait_message.outerWidth()) / 2 + $(window).scrollLeft()) + 'px' }); Categories: CSSjQuery 分類 Android AngularJS Chrome Database MySQL DataStructure Editor Vim Firefox Git Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋：