Zi 字媒體
2017-07-25T20:27:27+00:00
在網路上常會看到許多當點擊後，四周畫面一黑，然後出現一些文字訊息方塊的特效
這種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
API Blueprint
Chrome
Database
MySQL
DataStructure
Docker
Editor
Vim
Firefox
Git
GitLab
Google API
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
搜尋關鍵字:
寫了
5860316篇文章，獲得
23313次喜歡