【第155 話】 JavaScript で作る美女たちのスクリーンセーバー - 続・ボディ 編 -
★タッチするにたびに、美女が着ているモノを一枚づつ○×△するのは簡単そうだが、タッチしなくとも○×△してもらうようにするには、リアル同様一筋縄ではいかない。- by Lovely Wolf -
★ブログをスクリーンセーバーみたくしてみたい！ってとき、キミにはWolf の90 秒シリーズという強い味方がいる。
・・・で、どうやるのか？というと、背景画像を数秒ごとに入れ替えるという仕組みを実現するだけでいい。
・・・ソラマメデフォルトのシンプルテンプレートやオリジナル★テンプレートの上部に入れてるメイン画像でやってみたい方は、次の関連記事をどうぞ。
【ブログスクリーンセーバー 関連記事】
# Case 1.<WEB URL>
http://lovelywolf.slmame.com/e592991.html
var gblPhotoShufflerDivId = "photodiv"; var gblPhotoShufflerImgId = "photoimg"; var gblImg = new Array('http://img01.slmame.com/usr/lovelywolf/09041807.jpg','http://img01.slmame.com/usr/lovelywolf/09041809.jpg','http://img01.slmame.com/usr/lovelywolf/09041810.jpg','http://img01.slmame.com/usr/lovelywolf/09041811.jpg','http://img01.slmame.com/usr/lovelywolf/09041812.jpg'); var gblPauseSeconds = 2.25; var gblFadeSeconds = 3.25; var gblRotations = 100;var gblDeckSize = gblImg.length; var gblOpacity = 100; var gblOnDeck = 0; var gblStartImg; var gblImageRotations = gblDeckSize * (gblRotations+1); window.onload = photoShufflerLaunch; function photoShufflerLaunch(){var theimg = document.getElementById(gblPhotoShufflerImgId); gblStartImg = theimg.src; document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')'; setTimeout("photoShufflerFade()",gblPauseSeconds*1000); }; function photoShufflerFade(){var theimg = document.getElementById(gblPhotoShufflerImgId); var fadeDelta = 100 / (30 * gblFadeSeconds); if (gblOpacity < 2*fadeDelta ){gblOpacity = 100; if (gblImageRotations < 1) return; photoShufflerShuffle(); setTimeout("photoShufflerFade()",gblPauseSeconds*1000);}else{gblOpacity -= fadeDelta; setOpacity(theimg,gblOpacity); setTimeout("photoShufflerFade()",5); }; }; function photoShufflerShuffle(){ var thediv = document.getElementById(gblPhotoShufflerDivId); var theimg = document.getElementById(gblPhotoShufflerImgId); theimg.src = gblImg[gblOnDeck]; setOpacity(theimg,100); gblOnDeck = ++gblOnDeck % gblDeckSize; if (--gblImageRotations < 1){ gblImg[gblOnDeck] = gblStartImg; }; thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')'; }; function setOpacity(obj, opacity) {opacity = (opacity == 100)?99.999:opacity; obj.style.filter = "alpha(opacity:"+opacity+")";obj.style.KHTMLOpacity = opacity/100; obj.style.MozOpacity = opacity/100; obj.style.opacity = opacity/100;}
#photodiv {background-repeat: no-repeat; padding:0px; margin:0px;border: none;}
#photoimg {background-repeat: no-repeat; padding:0px; margin:0px;border: none;}
★しかし、もしキミのブログがオレのブログと同じように<body> タグに対して背景画像を指定しているのなら、関連記事で紹介したTips 1. とTips 3. で
赤字部分のようにする必要がある。
Tips 1. 最初に表示させる背景画像は、スタイルシートのbody に登録しておく
・・・理由は関連記事をどうぞ。
/* HTMLタグ設定 */
body{
margin: 0px;
padding: 0px;
text-align: center;
background-color: #333333;
font-size: 100%;
background-image: url(http://img01.slmame.com/usr/lovelywolf/09041801-0.jpg);
}
Tips 3. JavaScript に画像と、画像を切り替える時間を設定する
・・・このスクリプトは自作したものなので、使う場合は著作権情報もコピペして記載してください。ご質問がある方は、コメント欄からどうぞ。
<body>
<script type="text/javascript">
<!--
/*--------------------------------------------------------------------------
* Blog Screen Saver, version 1.2.1
* Copyright(C)2009/* Lovely Wolf Report in SLMaMe * ALL Rights Reserved
* For details, please check the website :
http://lovelywolf.slmame.com/
*--------------------------------------------------------------------------*/
/* 数値設定 */
fist_display_time =
1000; // 最初の画像が切り替わるまでの時間(1/1000秒)
main_display_time =
7000; // 画像の表示時間(1/1000秒)
transition_time =
500; // トランジション中の画像を表示する時間(1/1000秒)
var num=0;
var imglist = new Array(
"http://img01.slmame.com/usr/lovelywolf/09041801-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041801-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041801-2.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041802-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041803-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041802-2.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041803-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041803-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041803-2.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041804-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041804-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041804-2.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041805-0.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041805-1.jpg",
"http://img01.slmame.com/usr/lovelywolf/09041805-2.jpg"
);
if(window.addEventListener){
window.addEventListener("load", settime, false);
}
else if(window.attachEvent){
window.attachEvent("onload", settime);
}
else{
window.onload = settime;
}
function settime(){
setTimeout(imgload, fist_display_time);
}
function imgload(){
if(num < imglist.length){
document.
body.style.backgroundImage='url("'+imglist[num]+'")';
if(imglist[num].match(/0\.jpg/)){
TimerIDS = setTimeout(imgload, main_display_time);
}
else{
TimerIDS = setTimeout(imgload, transition_time);
}
num++;
}
if(num == imglist.length){
num=0;
clearTimeout(TimerIDS);
setTimeout(imgload, transition_time);
}
}
//-->
<script>
</body>
・・・本日は、90 秒もいらなかったかも。orz