3C科技 娛樂遊戲 美食旅遊 時尚美妝 親子育兒 生活休閒 金融理財 健康運動 寰宇綜合

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 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 搜尋:

本文由blogjohnsonluorg提供 原文連結

寫了 5860316篇文章,獲得 23313次喜歡
精彩推薦