column

2013-01-08|jQueryで画像をポップアップ〜Javascript-for文

CATEGORY JavaScript jQuery PC & Web お勉強 TAG, , ,

投稿日:2013年5月1日 更新日:

執筆者:

2013-01-08

jQueryで画像をポップアップ

Gadgets powered by Google


<pre><!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></pre>
<h4></h4>

Javascript-for文

  • 文字を繰り返す


<pre><script>
var i;
for (i = 0; i < 10; i++) {
	document.write('<p>JavaScript</p>');
}
</script></pre>
  • 年齢を選択して下さい。


<pre><p>年齢を選択して下さい。</p>
<select>
<script>
var i;
for (i=20; i<=70; i++) {
	document.write('<option value="' + i + '">' + i + '歳</option>');
}
</script>
</select></pre>
  • 西暦を表示


<pre><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></pre>
  • 偶数の合計


<pre><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></pre>
  • 3の倍数を強調表示


<pre><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></pre>
  • 1~100を全て合計した結果


<pre><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></pre>
  • 九九の対数表を表示


<pre><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></pre>
 


コメントを残す

関連記事

PREV

2013-01-07|JavaScript

NEXT

2013-01-09|while文〜break〜jQuery〜Flash

2013-01-08|jQueryで画像をポップアップ〜Javascript-for文

side bar

メニューはこちら

メニューはこちら