今回はJavaScriptライブラリの「jQuery」のfadeIn・fadeOutメソッドで遊んでみました。fadeIn・fadeOutメソッドでどのようなことが出来るかというと、まずは以下のボタンを押下してください。
※注：PC表示でのみ動きます。
当ブログのヘッダー部分に「Welcome to Koh's WebSite!」というラベルが表示され、消えましたでしょうか？そうです、このような動きをウェブサイトに加える事ができるのです。
jQueryライブラリーはhttp://jquery.com/download/よりダウンロードし、<script src="***.js"> </script>で読む込む事により使用可能となります。
今回実装したjQueryのソースは以下の通りです。
(function($){
$.doWelcome = function(params) {
var msglavel = "";
msglavel += "div id='MessageBox'><p>";
msglavel += params.message;
msglavel += "</p></div>";
$(msglavel).hide().appendTo("body").fadeIn(1500);
setTimeout(function() {
$("#MessageBox").fadeOut(function(){
$(this).remove();
})},4000);
}
})(jQuery);
function doMessage(msg) {
$.doWelcome({
'message' : msg
});
}
$.doWelcome = function(params) {
var msglavel = "";
msglavel += "div id='MessageBox'><p>";
msglavel += params.message;
msglavel += "</p></div>";
$(msglavel).hide().appendTo("body").fadeIn(1500);
setTimeout(function() {
$("#MessageBox").fadeOut(function(){
$(this).remove();
})},4000);
}
})(jQuery);
function doMessage(msg) {
$.doWelcome({
'message' : msg
});
}
doMessage("Welcome to Koh's WebSite!")でfunctionを呼び出すことでメッセージラベルが表示されます。表示位置や表示スタイルはＣＳＳを使用して調整してください。
投稿時点では、一日の初めに当ブログに訪れた際、該当のメッセージが表示されるように設定していまーす。
