2009年04月19日
★90 秒で作る！美女たちのスクリーンセーバー Case.2
【第155 話】 JavaScript で作る美女たちのスクリーンセーバー - 続・ボディ 編 -
★タッチするにたびに、美女が着ているモノを一枚づつ○×△するのは簡単そうだが、タッチしなくとも○×△してもらうようにするには、リアル同様一筋縄ではいかない。- by Lovely Wolf -
★ブログをスクリーンセーバーみたくしてみたい！ってとき、キミにはWolf の90 秒シリーズという強い味方がいる。
・・・で、どうやるのか？というと、背景画像を数秒ごとに入れ替えるという仕組みを実現するだけでいい。
・・・ソラマメデフォルトのシンプルテンプレートやオリジナル★テンプレートの上部に入れてるメイン画像でやってみたい方は、次の関連記事をどうぞ。
【ブログスクリーンセーバー 関連記事】
# Case 1.<WEB URL> http://lovelywolf.slmame.com/e592991.html
★しかし、もしキミのブログがオレのブログと同じように<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(//img01.tec29.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(
"//img01.tec29.com/usr/lovelywolf/09041801-0.jpg",
"//img01.tec29.com/usr/lovelywolf/09041801-1.jpg",
"//img01.tec29.com/usr/lovelywolf/09041801-2.jpg",
"//img01.tec29.com/usr/lovelywolf/09041802-0.jpg",
"//img01.tec29.com/usr/lovelywolf/09041803-1.jpg",
"//img01.tec29.com/usr/lovelywolf/09041802-2.jpg",
"//img01.tec29.com/usr/lovelywolf/09041803-0.jpg",
"//img01.tec29.com/usr/lovelywolf/09041803-1.jpg",
"//img01.tec29.com/usr/lovelywolf/09041803-2.jpg",
"//img01.tec29.com/usr/lovelywolf/09041804-0.jpg",
"//img01.tec29.com/usr/lovelywolf/09041804-1.jpg",
"//img01.tec29.com/usr/lovelywolf/09041804-2.jpg",
"//img01.tec29.com/usr/lovelywolf/09041805-0.jpg",
"//img01.tec29.com/usr/lovelywolf/09041805-1.jpg",
"//img01.tec29.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
Posted by Lovely Wolf at 15:47│Comments(0)
│【SEXY デザインTips】
