【第 79 話】 耐久テスト実施中！- 実験 編 -
★他人のScript を勝手に配布するワケにはいかないが、使い方を紹介するのは著作権違反でも何でもない。
- by Lovely Wolf -
★【第 77 話】で試してみたエフェクトをもう少しだけいじってみた。
・・・どうやってこいつをテンプレートにぶち込むかが問題だ。 var gblPhotoShufflerDivId = "photodiv"; var gblPhotoShufflerImgId = "photoimg"; var gblImg = new Array('http://img01.slmame.com/usr/lovelywolf/08101201.jpg','http://img01.slmame.com/usr/lovelywolf/08101202.jpg','http://img01.slmame.com/usr/lovelywolf/08101203.jpg','http://img01.slmame.com/usr/lovelywolf/08101204.jpg','http://img01.slmame.com/usr/lovelywolf/08101205.jpg','http://img01.slmame.com/usr/lovelywolf/08101206.jpg','http://img01.slmame.com/usr/lovelywolf/08101207.jpg','http://img01.slmame.com/usr/lovelywolf/08101208.jpg','http://img01.slmame.com/usr/lovelywolf/08101209.jpg','http://img01.slmame.com/usr/lovelywolf/08101210.jpg','http://img01.slmame.com/usr/lovelywolf/08101211.jpg','http://img01.slmame.com/usr/lovelywolf/08101212.jpg','http://img01.slmame.com/usr/lovelywolf/08101213.jpg','http://img01.slmame.com/usr/lovelywolf/08101214.jpg','http://img01.slmame.com/usr/lovelywolf/08101215.jpg','http://img01.slmame.com/usr/lovelywolf/08101216.jpg','http://img01.slmame.com/usr/lovelywolf/08101217.jpg','http://img01.slmame.com/usr/lovelywolf/08101218.jpg','http://img01.slmame.com/usr/lovelywolf/08101219.jpg','http://img01.slmame.com/usr/lovelywolf/08101220.jpg','http://img01.slmame.com/usr/lovelywolf/08101221.jpg','http://img01.slmame.com/usr/lovelywolf/08101222.jpg','http://img01.slmame.com/usr/lovelywolf/08101223.jpg','http://img01.slmame.com/usr/lovelywolf/08101224.jpg','http://img01.slmame.com/usr/lovelywolf/08101225.jpg','http://img01.slmame.com/usr/lovelywolf/08101226.jpg','http://img01.slmame.com/usr/lovelywolf/08101227.jpg','http://img01.slmame.com/usr/lovelywolf/08101228.jpg','http://img01.slmame.com/usr/lovelywolf/08101229.jpg','http://img01.slmame.com/usr/lovelywolf/08101230.jpg','http://img01.slmame.com/usr/lovelywolf/08101231.jpg','http://img01.slmame.com/usr/lovelywolf/08101232.jpg','http://img01.slmame.com/usr/lovelywolf/08101233.jpg','http://img01.slmame.com/usr/lovelywolf/08101234.jpg','http://img01.slmame.com/usr/lovelywolf/08101235.jpg','http://img01.slmame.com/usr/lovelywolf/08101236.jpg','http://img01.slmame.com/usr/lovelywolf/08101237.jpg','http://img01.slmame.com/usr/lovelywolf/08101238.jpg','http://img01.slmame.com/usr/lovelywolf/08101239.jpg'); var gblPauseSeconds = 1.25; var gblFadeSeconds = 1.85; 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;wiｄth:750px;}
#photoimg {background-repeat: no-repeat; padding:0px; margin:0px;border: none;wiｄth:750px;}
★CSS Photo Shuffler
//
// CSS Photo Shuffler v1.0 by
// Carl Camera
//
http://iamacamera.org
//
// SetOpacity Function and inpiration from Photo Fade by
// Richard Rutter
//
http://clagnut.com
//
// License: Creative Commons Attribution 2.5 License
//
http://creativecommons.org/licenses/by/2.5/
//
// Customize your photo shuffle settings
//
// * Surround the target <img /> with a <div>. specify id= in both
// * set background-repeat:no-repeat in CSS for the div
// * The first and final photo displayed is in the html <img> tag
// * The array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
【ブログでスクリーンセーバーを作ってみる！ - 関連記事】
# Case 1.<Web URL>
http://lovelywolf.slmame.com/e387898.html
# Case 2.<Web URL>
http://lovelywolf.slmame.com/e390204.html