34回目授業内容 jQuery〜脱線
[授業][JavaScript][Dreamweaver][jQuery]
jQueryで画像をポップアップ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery lightBox plugin</title> <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css"> <!-- Arquivos utilizados pelo jQuery lightBox plugin --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"> <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin --> <!-- Ativando o jQuery lightBox plugin --> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <style type="text/css"> /* jQuery lightBox plugin - Gallery style */ body { background-color: #000; text-align: center; margin: 0 auto; } p { color: #fff; } h2 { color: #fff; } #gallery a { text-decoration: none; } #gallery { background-color: #171717; padding: 10px; width: 840px; margin: 0 auto; } #gallery ul { list-style: none; margin: 10px 0 10px 0; padding: 0; } #gallery ul li { display: inline; } #gallery ul img { border: 5px solid #262626; border-width: 5px 5px 5px; } #gallery ul a:hover img { border: 5px solid #fff; border-width: 5px 5px 5px; color: #fff; } #gallery ul a:hover { color: #fff; } </style> </head> <body> <h2 id="example">jQuery lightBox plugin を使ったLightBoxの練習</h2> <p>写真を<strong>クリック</strong> すると拡大します。</p> <div id="gallery"> <ul> <li> <a href="photos/1.jpg" title="ここに写真のキャプションが入る"> <img src="photos/thumb_1.jpg" width="150" height="113" alt=""> </a> </li> <li> <a href="photos/2.jpg" title="ここに写真のキャプションが入る"> <img src="photos/thumb_2.jpg" width="150" height="113" alt=""> </a> </li> <li> <a href="photos/3.jpg" title="ここに写真のキャプションが入る"> <img src="photos/thumb_3.jpg" width="150" height="113" alt=""> </a> </li> <li> <a href="photos/4.jpg" title="ここに写真のキャプションが入る"> <img src="photos/thumb_4.jpg" width="150" height="113" alt=""> </a> </li> <li> <a href="photos/5.jpg" title="ここに写真のキャプションが入る"> <img src="photos/thumb_5.jpg" width="150" height="113" alt=""> </a> </li> </ul> </div> </body> </html>
for文
- 文字を繰り返す
<script> var i; for (i = 0; i < 10; i++) { document.write('<p>JavaScript</p>'); } </script>
- 年齢を選択して下さい。
<p>年齢を選択して下さい。</p> <select> <script> var i; for (i=20; i<=70; i++) { document.write('<option value="' + i + '">' + i + '歳</option>'); } </script> </select>
- 西暦を表示
<table> <tr><th>和暦(平成)</th><th>西暦</th></tr> <script> var i; for (i = 1; i <= 25; i = i + 1) { document.write('<tr><td>', i, '</td>'); document.write('<td>', i + 1988, '</td></tr>'); } </script> </table>
- 偶数の合計
<body> <h3>偶数の合計</h3> <p>以下のボタンをクリックすると、</p> <p>2、4、6、8、…、100を全て合計した結果を表示できます。</p><br> <button onClick="total()">計算結果</button> <script> function total(){ var ans = 0; for (i=2 ; i<=100 ; i=i+2){ ans = ans + i; } alert('2、4、6、8、…、100の合計は' + ans + 'です。'); } </script> </body>
- 3の倍数を強調表示
<style> #mulOfThree { font-weight: bold; font-size: 1.5em; } </style> </head> <body> <h1>3の倍数を強調表示</h1> <p> <script> var MAX = 15; for(var i=1; i<=MAX; i++){ if((i % 3) == 0) { document.write('<span id="mulOfThree">',i,'</span>',' '); }else{ document.write(i + ' '); } } </script> </p> </body>
- 1〜100を全て合計した結果
<h3>合計</h3> <p>以下のボタンをクリックすると、</p> <p>1〜100を全て合計した結果を表示できます。</p> <button onClick="total()">計算結果</button> <script> function total() { var ans = 0; for(i=0; i<=100; i++) { ans = ans + i; } alert('1~100の合計は' + ans + 'です。'); } </script>
- 九九の対数表を表示
<style> table { border-collapse: collapse; } td,th { width: 50px; text-align: center; } th { background-color: #CCC; } </style> </head> <body> <h3>九九表</h3> <table width="500" border="1"> <tr> <th> </th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> </tr> <script> for(i=1; i<=9; i++){ document.write('<tr><th>' + i + '</th>'); for(j=1; j<=9; j++){ document.write('<td>' + i*j + '</td>'); } document.write('</tr>'); } </script> </body>