ランダムバナーとランダム背景画像を作りました [IE7対応]
Web黎明期によく見かけた、ページを開く度にバナーや背景画像をランダムに切り替えるJavaScript。
最近仕事で作る機会があったので保存。
検証済みブラウザとOS
- IE7 ～
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
- iOS 8
- Android 4.1
ランダムバナー
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <section> <h1>後ろで大きな爆発音がした</h1> <p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</p> <div><script src="js/javascript.js"></script></div> </section> <section> <h1>俺は驚いて振り返った</h1> <p>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）</p> <div><script src="js/javascript.js"></script></div> </section> <section> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div><script src="js/javascript.js"></script></div> </section> |
1 2 3 | div { width: 300px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /* Randomly switch banner Author: KEITA HIRAI URL: keitahirai.net */ (function() { var url = [ "//www.yahoo.co.jp/", "//www.google.co.jp/", "//twitter.com/", "//www.youtube.com/", "//www.nicovideo.jp/" ]; var img = [ "ph_01", "ph_02", "ph_03", "ph_04", "ph_05" ]; var text = [ "Yahooへのリンクです。別ウィンドウで飛びます。", "Googleへのリンクです。別ウィンドウで飛びます。", "twitterへのリンクです。別ウィンドウで飛びます。", "YouTubeへのリンクです。別ウィンドウで飛びます。", "ニコニコ動画へのリンクです。別ウィンドウで飛びます。" ]; var n = Math.random() * url.length | 0; // 配列数が同じのため1つでOK document.write( '<a href="' + url[n] + '" target="_blank"><img src="images/' + img[n] + '.jpg">' + text[n] + '</a>' ); })(); |
ランダム背景
1 2 3 4 5 | <header id="keyvisual"> <h1>ランダム背景</h1> </header> <script src="js/javascript.js"></script> |
1 2 3 4 5 6 7 8 9 | #keyvisual { height: 200px; color: white; margin-bottom: 40px; padding: 40px 0 0 30px; background-repeat: no-repeat; background-position: center; background-size: cover; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* Randomly switch images Author: KEITA HIRAI URL: keitahirai.net */ var keyvisual = document.getElementById("keyvisual"); if (keyvisual != null) { var bg = [ "images/bg_01.jpg", "images/bg_02.jpg", "images/bg_03.jpg", "images/bg_04.jpg", "images/bg_05.jpg" ]; var n = Math.random() * bg.length | 0; keyvisual.style.backgroundImage = 'url(' + bg[n] + ')'; // パスはhtmlファイルを起点 }; |
posted with amazlet at 15.07.31
古籏 一浩
シーアンドアール研究所
売り上げランキング: 328,063
シーアンドアール研究所
売り上げランキング: 328,063
コメントを投稿する