jQueryセミナー
※受講した際のメモなので、お気づきの点がありましたらご連絡ください。
===========================================================================
jQueryセミナーpart1
http://ameblo.jp/pyony30/entry-11331686737.html
jQueryセミナーpart2
http://ameblo.jp/pyony30/entry-11337547614.html
jQueryセミナーサンプル編
http://ameblo.jp/pyony30/entry-11337538856.html
===========================================================================
＊とりあえず書いてみる。
===========================================================================
＠index.html###########################################
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery入門セミナー</title>
<link type="text/css" rel="stylesheet" href="../../style/style.css">
<script type="text/javascript" src="../../script/jquery.js" ></script>
<script type="text/javascript" src="script/script.js" ></script>
</head>
<body>
<div id="container">
<!-- ↓ここに必要なHTMLをかいていく -->
<!-- ↑ここに必要なHTMLをかいていく -->
</div>
</body>
＠style.css###########################################
@charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
font-size:12px;
}
h2.title {
line-height:24px;
height:24px;
font-size:14px;
border-style:solid none;
border-width:1px;
border-color:#CCC;
padding:8px 0;
}
#container {
width:900px;
margin:0 auto;
}
ul.nav {
width:180px;
float:left;
margin:20px 0 0 20px;
padding:0;
}
ul.nav li {
width:220px;
margin-right:5px;
}
ul.nav li a{
display:block;
text-decoration:none;
padding:10px;
color:#FFFFFF;
background:#333333;
border:solid 1px #666;
}
ul.nav li li{
/*border:solid 1px #666;*/
width:200px;
padding:9px;
float:none;
margin:0;
background:#FFFFFF;
border-color:#666;
border-style:none solid solid solid;
border-width:1px;
}
ul.nav li li a{
display:inline;
text-decoration:none;
padding:0;
color:#000;
background:none;
border:none;
}
ul {
margin:0 0 20px 0;
padding:0;
}
li {
margin:0;
padding:0;
list-style:none;
font-size:12px;
}
div.block {
margin-bottom:50px;
}
pre {
background:#e5e5e5;
border:solid 1px #CCCCCC;
padding:10px;
}
#content {
width:640px;
float:right;
}
＠dropdown.css
/* style.cssで定義されているスタイルをクリア */
ul.nav {
overflow:auto;
width:100%;
margin:20px 0 20px 0;
float:none;
}
#content {
width:100%;
float:none;
}
/* ナビゲーションを横並びに設定 */
ul.nav li {
float:left;
}
ul.nav li ul {
position:absolute;
display:none;
}
===========================================================================
■jQueryでリストの一番始めの要素を指定
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li><a href="#" class="link">menu1</a></li>
<li><a href="#" class="link">menu2</a></li>
</ul>
</li>
</ul>
＠script.js###########################################
$(function(){
$("li li:first").css(
{"font-size":"24px"}
);
});
■jQueryでform要素の中からラジオボタンを選択
＠script.js###########################################
$(function(){
$("form input:radio").css(
{"background":"yellow","border":"3px solid red"}
);
});
■jQueryでalertの実行
a.linkをクリックしてalertの実行
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li class="list"><a href="#" class="link">menu1</a></li>
<li class="list"><a href="#" class="link">menu2</a></li>
<li class="list"><a href="#" class="link">menu3</a></li>
</ul>
</li>
</ul>
<h2 class="title">サンプル</h2>
<p>sample</p>
＠script.js###########################################
$(function(){
$("a.link").click(function(e){
alert("クリックされました。");
});
});
■jQueryで表示色を変えてみる
a.linkをクリックしてh2.titleの色を変える
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li class="list"><a href="#" class="link">menu1</a></li>
<li class="list"><a href="#" class="link">menu2</a></li>
<li class="list"><a href="#" class="link">menu3</a></li>
</ul>
</li>
</ul>
<h2 class="title">サンプル</h2>
<p>sample</p>
＠script.js###########################################
$(function(){
$("a.link").click(function(e){
$("h2.title").css({"color":"red"});
});
});
■jQueryでマウス処理（mouseoverとmouseout編）
ロールオーバーを取得する場合はmouseoverメソッド
逆にロールアウトを取得する場合はmouseoutメソッド
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li class="list"><a href="#" class="link">menu1</a></li>
<li class="list"><a href="#" class="link">menu2</a></li>
<li class="list"><a href="#" class="link">menu3</a></li>
</ul>
</li>
</ul>
<h2 class="title">サンプル</h2>
<p>sample</p>
＠script.js###########################################
$(function(){
$('a.link').mouseover(
function(e){ $(this).css({'color':'red'});}
);
$('a.link').mouseout(
function(e){ $(this).css({'color':'blue'});}
);
});
■jQueryでマウス処理（hover編）
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li class="list"><a href="#" class="link">menu1</a></li>
<li class="list"><a href="#" class="link">menu2</a></li>
<li class="list"><a href="#" class="link">menu3</a></li>
</ul>
</li>
</ul>
<h2 class="title">サンプル</h2>
<p>sample</p>
＠script.js###########################################
$(function(){
$("a.link").hover(
function(e){ $( this ).css({"color":"red"}); } ,
function(e){ $( this ).css({"color":"blue"}); }
);
});
■jQueryでFadeIn／FadeOut
＠index.html###########################################
<div id="content">
<h2 class="title">サンプル</h2>
<a href="#" class="show">FadeIn</a>／<a href="#" class="hide">FadeOut</a>
</div>
＠script.js###########################################
$(function(){
$("a.show").click(
function(e){ $("pre.text01").fadeIn(); return false; }
//function(e){ $("pre.text01").fadeIn(500); return false; }
);
$("a.hide").click(
function(e){ $("pre.text01").fadeOut(); return false; }
//function(e){ $("pre.text01").fadeOut(500); return false; }
);
});
■jQueryでFadeIn／FadeOut（fadeTo関数編）
fadeToというメソッドを使うことで透明度を自分で設定できる
＠index.html###########################################
<div id="content">
<h2 class="title">サンプル</h2>
<a href="#" class="show">FadeIn</a>／<a href="#" class="hide">FadeOut</a>
</div>
＠script.js###########################################
$(function(){
$('pre.text03').mouseover(
function(e){ $(this).fadeTo( 500, 0.6 ); }
);
$('pre.text03').mouseout(
function(e){ $(this).fadeTo( 500, 1 ); }
)
});
■jQueryで横にスライドするアニメーション
＠index.html###########################################
<div id="content">
<h2 class="title">サンプル</h2>
<a href="#" class="animate">animate</a><br />
<img class="image" src="images/image01_01.jpg" alt="jQuery" width="160" height="120" />
</div>
＠script.js###########################################
$(function(){
$("img.image").css({"position":"relative","display":"block"});
$("a.animate").hover(
function(e){ $("img.image").animate({"left":"300px"},500); } ,
function(e){ $("img.image").animate({"left":"0"},500); }
);
});
■jQueryでトップへのアンカーリンクもanimateを使ってみる
＠index.html###########################################
<div id="content">
<a href="#" class="page-top">TOPへ</a><br />
</div>
＠script.js###########################################
$(function(){
$('a.page-top').click(
function( e ){ $("html, body").animate({"scrollTop":"0"},500); return false; }
);
});
■jQueryでトップへ戻る（ぼんぼんはねる編）
＠index.html###########################################
↓<head>へ追加
<script type="text/javascript" src="script/lib/jquery.easing.js" ></script>
↓<body>へ追加
<div id="content">
<a href="#" class="page-top">TOPへ</a><br />
</div>
＠script.js###########################################
$(function(){
$('a.page-top').click(
function( e ){ $('html, body').animate({scrollTop:0},500,"easeOutBounce"); return false; }
);
});
http://semooh.jp/jquery/cont/doc/easing/
■jQueryでメニューを表示させてみる
＠index.html###########################################
<li><a href="#">メニュー</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
＠script.js###########################################
$(function(){
$("ul.nav ul").hide();
$("ul.nav li a").click(function(e){
$( this ).next("ul").slideToggle(200);
return false;
});
});
■jQueryでメニューにロールオーバーすることでメニューを開閉できるようにしたい
＠index.html###########################################
↓<head>へ追加
<link type="text/css" rel="stylesheet" href="style/dropdown.css">
↓<body>へ追加
<ul class="nav">
<li><a href="#">メニュー</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
＠script.js###########################################
$(function(){
$("ul.nav li").hover(
function(e){ $( this ).children("ul").show(); } ,
function(e){ $( this ).children("ul").hide(); }
);
});
■jQueryでメニュー開閉時にアニメーションをさせてみる
＠index.html###########################################
↓<head>へ追加
<link type="text/css" rel="stylesheet" href="style/dropdown.css">
↓<body>へ追加
<ul class="nav">
<li><a href="#">メニュー</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
＠script.js###########################################
$(function(){
$("ul.nav li").hover(
function(e){ $( this ).children("ul").slideDown(200); } ,
function(e){ $( this ).children("ul").slideUp(200); }
);
});
slideToggleはトグル式の開閉メソッド
slideDown()、slideUp()は明示的に表示・非表示を指定することができる。
■jQueryでスライドを作る（自分で関数を作ってみる）
＠画像を用意###########################################
images/image01.jpg width="768" height="480"
images/image02.jpg width="768" height="480"
images/image03.jpg width="768" height="480"
images/thumb01.jpg width="250" height="156"
images/thumb02.jpg width="250" height="156"
images/thumb03.jpg width="250" height="156"
＠gallery.css###########################################
@charset "UTF-8";
/* CSS Document */
ul,li {
margin:0;
padding:0;
list-style:none;
}
img {
vertical-align:middle;
}
ul.images {
float:left;
margin-right:6px;
height:480px;
overflow:hidden;
}
ul.images li{
position:relative;
}
ul.thumbnails li{
margin-bottom:6px;
}
＠index.html###########################################
↓<head>へ追加
<link rel="stylesheet" type="text/css" href="style/gallery.css">
↓<body>へ追加
<body>
<ul class="images">
<li><img src="images/image01.jpg" alt="" width="768" height="480" ></li>
<li><img src="images/image02.jpg" alt="" width="768" height="480" ></li>
<li><img src="images/image03.jpg" alt="" width="768" height="480" ></li>
</ul>
<ul class="thumbnails">
<li value="0"><img src="images/thumb01.jpg" alt="" width="250" height="156"></a></li>
<li value="1"><img src="images/thumb02.jpg" alt="" width="250" height="156"></a></li>
<li value="2"><img src="images/thumb03.jpg" alt="" width="250" height="156"></a></li>
</ul>
</body>
＠scirpt.js###########################################
$(function(){
function slideImage( value ) {
$('ul.images li').animate( { 'top':value * - 480 }, 400 );
}
$('ul.thumbnails li').click( function(e){
slideImage($(this).attr('value'));
return false;
});
});
■jQueryでスライドを作る（自分で関数を作ってみる）
＠画像を用意###########################################
そのまま
＠gallery.css###########################################
そのまま
＠index.html###########################################
<ul class="thumbnails">
<li><a href="images/image01.jpg"><img src="images/thumb01.jpg" alt="" width="250" height="156"></a></a></li>
<li><a href="images/image02.jpg"><img src="images/thumb02.jpg" alt="" width="250" height="156"></a></a></li>
<li><a href="images/image03.jpg"><img src="images/thumb03.jpg" alt="" width="250" height="156"></a></a></li>
</ul>
＠script.js###########################################
function slideImage( value ){
$("ul.images li").animate({"top":value * -480},500);
};
■jQueryでスライドを作る（.attrを取得してみる）
＠画像を用意###########################################
そのまま
＠gallery.css###########################################
そのまま
＠index.html###########################################
そのまま
＠script.js###########################################
$(function(){
$("ul.thumbnails li").click(
function(e){
alert( $( this ).attr("value") ); return false;
}
);
});
■jQueryでlightboxを使ってみる
＠画像を用意###########################################
そのまま
＠lightboxを用意##########################################
style/jquery.lightbox-0.5.css
script/jquery.lightbox-0.5.js
＠index.html###########################################
↓<head>の追加
<link href="style/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery.lightbox-0.5.js" ></script>
↓<body>の追加
<ul class="thumbnails">
<li><a href="images/image01.jpg"><img src="images/thumb01.jpg" alt="" width="250" height="156"></a></a></li>
<li><a href="images/image02.jpg"><img src="images/thumb02.jpg" alt="" width="250" height="156"></a></a></li>
<li><a href="images/image03.jpg"><img src="images/thumb03.jpg" alt="" width="250" height="156"></a></a></li>
</ul>
＠script.js（標準で使う）###########################################
$(function(){
$("ul.thumbnails a").lightBox();
});
＠script.js（カスタマイズして使う）###########################################
$(function(){
$("ul.thumbnails a").lightBox({
overlayBgColor:'#FF0000' ,
overlayOpacity:1 ,
imageLoading:'http://example.com/images/loading.gif'
});
});
===========================================================================
■jQueryでスライドを作る（.attrを取得してみる）スライドトランジション
＠index.html###########################################
↓<head>に追加
<script type="text/javascript " src="../script/jquery.easing.1.3.js"></script>
↓<body>に追加
<div id="wrapper">
<div class="images">
<ul>
<li><img src="../images/image01.jpg" width="638" height="428"></li>
<li><img src="../images/image02.jpg" width="638" height="428"></li>
<li><img src="../images/image03.jpg" width="638" height="428"></li>
<li><img src="../images/image04.jpg" width="638" height="428"></li>
<li><img src="../images/image05.jpg" width="638" height="428"></li>
</ul>
</div><!-- /.images -->
<div class="thumbnails">
<ul>
<li value="0"><img src="../images/thumbnail01.jpg" width="118" height="78"></li>
<li value="1"><img src="../images/thumbnail02.jpg" width="118" height="78"></li>
<li value="2"><img src="../images/thumbnail03.jpg" width="118" height="78"></li>
<li value="3"><img src="../images/thumbnail04.jpg" width="118" height="78"></li>
<li value="4"><img src="../images/thumbnail05.jpg" width="118" height="78"></li>
</ul>
</div><!-- /.thumbnails -->
</div><!-- /#wrapper -->
</body>
＠style.css###########################################
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #000;
height: 100%;
}
#wrapper {
background: #222;
height: 540px;
width: 100%;
padding:0 10px;
position: absolute;
top: 50%;
margin-top: -270px;
}
img {
border: solid 1px #444;
vertical-align: middle;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
/* .images ----------------------------- */
.images {
width: 640px;
height: 430px;
overflow: hidden;
margin: 10px auto;
}
.images ul {
position: relative;
width: 3200px;
}
.images ul li{
float: left;
}
/* .thumbnails ----------------------------- */
.thumbnails {
width: 640px;
height: 80px;
overflow: hidden;
margin: 0 auto;
}
.thumbnails ul {
width: 650px;
}
.thumbnails ul li{
float: left;
margin-right: 10px;
}
＠script.js###########################################
$(function(){
$(".thumbnails li").click(
function(e){
//thumbnailsのvalue値を使って、slideImage()を呼び出す
slideImage( $(this).attr("value") );
}
);
//thumbnailsのvalue値を使って、imagesのulタグを動かす
//
function slideImage( value ){
//さらっと動く
/* $(".images ul").animate({"left":value * -640},1000); */
//ぴょんぴょんって動く
$(".images ul").animate({"left":value * -640},1000,"easeInOutElastic");
}
});
==========================================================================
＜以上＞
※受講した際のメモなので、お気づきの点がありましたらご連絡ください。
===========================================================================
jQueryセミナーpart1
http://ameblo.jp/pyony30/entry-11331686737.html
jQueryセミナーpart2
http://ameblo.jp/pyony30/entry-11337547614.html
jQueryセミナーサンプル編
http://ameblo.jp/pyony30/entry-11337538856.html
===========================================================================
＊とりあえず書いてみる。
===========================================================================
＠index.html###########################################
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery入門セミナー</title>
<link type="text/css" rel="stylesheet" href="../../style/style.css">
<script type="text/javascript" src="../../script/jquery.js" ></script>
<script type="text/javascript" src="script/script.js" ></script>
</head>
<body>
<div id="container">
<!-- ↓ここに必要なHTMLをかいていく -->
<!-- ↑ここに必要なHTMLをかいていく -->
</div>
</body>
＠style.css###########################################
@charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
font-size:12px;
}
h2.title {
line-height:24px;
height:24px;
font-size:14px;
border-style:solid none;
border-width:1px;
border-color:#CCC;
padding:8px 0;
}
#container {
width:900px;
margin:0 auto;
}
ul.nav {
width:180px;
float:left;
margin:20px 0 0 20px;
padding:0;
}
ul.nav li {
width:220px;
margin-right:5px;
}
ul.nav li a{
display:block;
text-decoration:none;
padding:10px;
color:#FFFFFF;
background:#333333;
border:solid 1px #666;
}
ul.nav li li{
/*border:solid 1px #666;*/
width:200px;
padding:9px;
float:none;
margin:0;
background:#FFFFFF;
border-color:#666;
border-style:none solid solid solid;
border-width:1px;
}
ul.nav li li a{
display:inline;
text-decoration:none;
padding:0;
color:#000;
background:none;
border:none;
}
ul {
margin:0 0 20px 0;
padding:0;
}
li {
margin:0;
padding:0;
list-style:none;
font-size:12px;
}
div.block {
margin-bottom:50px;
}
pre {
background:#e5e5e5;
border:solid 1px #CCCCCC;
padding:10px;
}
#content {
width:640px;
float:right;
}
＠dropdown.css
/* style.cssで定義されているスタイルをクリア */
ul.nav {
overflow:auto;
width:100%;
margin:20px 0 20px 0;
float:none;
}
#content {
width:100%;
float:none;
}
/* ナビゲーションを横並びに設定 */
ul.nav li {
float:left;
}
ul.nav li ul {
position:absolute;
display:none;
}
===========================================================================
■jQueryでリストの一番始めの要素を指定
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li><a href="#" class="link">menu1</a></li>
<li><a href="#" class="link">menu2</a></li>
</ul>
</li>
</ul>
＠script.js###########################################
$(function(){
$("li li:first").css(
{"font-size":"24px"}
);
});
■jQueryでform要素の中からラジオボタンを選択
＠script.js###########################################
$(function(){
$("form input:radio").css(
{"background":"yellow","border":"3px solid red"}
);
});
■jQueryでalertの実行
a.linkをクリックしてalertの実行
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li class="list"><a href="#" class="link">menu1</a></li>
<li class="list"><a href="#" class="link">menu2</a></li>
<li class="list"><a href="#" class="link">menu3</a></li>
</ul>
</li>
</ul>
<h2 class="title">サンプル</h2>
<p>sample</p>
＠script.js###########################################
$(function(){
$("a.link").click(function(e){
alert("クリックされました。");
});
});
■jQueryで表示色を変えてみる
a.linkをクリックしてh2.titleの色を変える
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li class="list"><a href="#" class="link">menu1</a></li>
<li class="list"><a href="#" class="link">menu2</a></li>
<li class="list"><a href="#" class="link">menu3</a></li>
</ul>
</li>
</ul>
<h2 class="title">サンプル</h2>
<p>sample</p>
＠script.js###########################################
$(function(){
$("a.link").click(function(e){
$("h2.title").css({"color":"red"});
});
});
■jQueryでマウス処理（mouseoverとmouseout編）
ロールオーバーを取得する場合はmouseoverメソッド
逆にロールアウトを取得する場合はmouseoutメソッド
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li class="list"><a href="#" class="link">menu1</a></li>
<li class="list"><a href="#" class="link">menu2</a></li>
<li class="list"><a href="#" class="link">menu3</a></li>
</ul>
</li>
</ul>
<h2 class="title">サンプル</h2>
<p>sample</p>
＠script.js###########################################
$(function(){
$('a.link').mouseover(
function(e){ $(this).css({'color':'red'});}
);
$('a.link').mouseout(
function(e){ $(this).css({'color':'blue'});}
);
});
■jQueryでマウス処理（hover編）
＠index.html###########################################
<ul class="nav">
<li><a href="#">サンプル</a>
<ul>
<li class="list"><a href="#" class="link">menu1</a></li>
<li class="list"><a href="#" class="link">menu2</a></li>
<li class="list"><a href="#" class="link">menu3</a></li>
</ul>
</li>
</ul>
<h2 class="title">サンプル</h2>
<p>sample</p>
＠script.js###########################################
$(function(){
$("a.link").hover(
function(e){ $( this ).css({"color":"red"}); } ,
function(e){ $( this ).css({"color":"blue"}); }
);
});
■jQueryでFadeIn／FadeOut
＠index.html###########################################
<div id="content">
<h2 class="title">サンプル</h2>
<a href="#" class="show">FadeIn</a>／<a href="#" class="hide">FadeOut</a>
</div>
＠script.js###########################################
$(function(){
$("a.show").click(
function(e){ $("pre.text01").fadeIn(); return false; }
//function(e){ $("pre.text01").fadeIn(500); return false; }
);
$("a.hide").click(
function(e){ $("pre.text01").fadeOut(); return false; }
//function(e){ $("pre.text01").fadeOut(500); return false; }
);
});
■jQueryでFadeIn／FadeOut（fadeTo関数編）
fadeToというメソッドを使うことで透明度を自分で設定できる
＠index.html###########################################
<div id="content">
<h2 class="title">サンプル</h2>
<a href="#" class="show">FadeIn</a>／<a href="#" class="hide">FadeOut</a>
</div>
＠script.js###########################################
$(function(){
$('pre.text03').mouseover(
function(e){ $(this).fadeTo( 500, 0.6 ); }
);
$('pre.text03').mouseout(
function(e){ $(this).fadeTo( 500, 1 ); }
)
});
■jQueryで横にスライドするアニメーション
＠index.html###########################################
<div id="content">
<h2 class="title">サンプル</h2>
<a href="#" class="animate">animate</a><br />
<img class="image" src="images/image01_01.jpg" alt="jQuery" width="160" height="120" />
</div>
＠script.js###########################################
$(function(){
$("img.image").css({"position":"relative","display":"block"});
$("a.animate").hover(
function(e){ $("img.image").animate({"left":"300px"},500); } ,
function(e){ $("img.image").animate({"left":"0"},500); }
);
});
■jQueryでトップへのアンカーリンクもanimateを使ってみる
＠index.html###########################################
<div id="content">
<a href="#" class="page-top">TOPへ</a><br />
</div>
＠script.js###########################################
$(function(){
$('a.page-top').click(
function( e ){ $("html, body").animate({"scrollTop":"0"},500); return false; }
);
});
■jQueryでトップへ戻る（ぼんぼんはねる編）
＠index.html###########################################
↓<head>へ追加
<script type="text/javascript" src="script/lib/jquery.easing.js" ></script>
↓<body>へ追加
<div id="content">
<a href="#" class="page-top">TOPへ</a><br />
</div>
＠script.js###########################################
$(function(){
$('a.page-top').click(
function( e ){ $('html, body').animate({scrollTop:0},500,"easeOutBounce"); return false; }
);
});
http://semooh.jp/jquery/cont/doc/easing/
■jQueryでメニューを表示させてみる
＠index.html###########################################
<li><a href="#">メニュー</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
＠script.js###########################################
$(function(){
$("ul.nav ul").hide();
$("ul.nav li a").click(function(e){
$( this ).next("ul").slideToggle(200);
return false;
});
});
■jQueryでメニューにロールオーバーすることでメニューを開閉できるようにしたい
＠index.html###########################################
↓<head>へ追加
<link type="text/css" rel="stylesheet" href="style/dropdown.css">
↓<body>へ追加
<ul class="nav">
<li><a href="#">メニュー</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
＠script.js###########################################
$(function(){
$("ul.nav li").hover(
function(e){ $( this ).children("ul").show(); } ,
function(e){ $( this ).children("ul").hide(); }
);
});
■jQueryでメニュー開閉時にアニメーションをさせてみる
＠index.html###########################################
↓<head>へ追加
<link type="text/css" rel="stylesheet" href="style/dropdown.css">
↓<body>へ追加
<ul class="nav">
<li><a href="#">メニュー</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
＠script.js###########################################
$(function(){
$("ul.nav li").hover(
function(e){ $( this ).children("ul").slideDown(200); } ,
function(e){ $( this ).children("ul").slideUp(200); }
);
});
slideToggleはトグル式の開閉メソッド
slideDown()、slideUp()は明示的に表示・非表示を指定することができる。
■jQueryでスライドを作る（自分で関数を作ってみる）
＠画像を用意###########################################
images/image01.jpg width="768" height="480"
images/image02.jpg width="768" height="480"
images/image03.jpg width="768" height="480"
images/thumb01.jpg width="250" height="156"
images/thumb02.jpg width="250" height="156"
images/thumb03.jpg width="250" height="156"
＠gallery.css###########################################
@charset "UTF-8";
/* CSS Document */
ul,li {
margin:0;
padding:0;
list-style:none;
}
img {
vertical-align:middle;
}
ul.images {
float:left;
margin-right:6px;
height:480px;
overflow:hidden;
}
ul.images li{
position:relative;
}
ul.thumbnails li{
margin-bottom:6px;
}
＠index.html###########################################
↓<head>へ追加
<link rel="stylesheet" type="text/css" href="style/gallery.css">
↓<body>へ追加
<body>
<ul class="images">
<li><img src="images/image01.jpg" alt="" width="768" height="480" ></li>
<li><img src="images/image02.jpg" alt="" width="768" height="480" ></li>
<li><img src="images/image03.jpg" alt="" width="768" height="480" ></li>
</ul>
<ul class="thumbnails">
<li value="0"><img src="images/thumb01.jpg" alt="" width="250" height="156"></a></li>
<li value="1"><img src="images/thumb02.jpg" alt="" width="250" height="156"></a></li>
<li value="2"><img src="images/thumb03.jpg" alt="" width="250" height="156"></a></li>
</ul>
</body>
＠scirpt.js###########################################
$(function(){
function slideImage( value ) {
$('ul.images li').animate( { 'top':value * - 480 }, 400 );
}
$('ul.thumbnails li').click( function(e){
slideImage($(this).attr('value'));
return false;
});
});
■jQueryでスライドを作る（自分で関数を作ってみる）
＠画像を用意###########################################
そのまま
＠gallery.css###########################################
そのまま
＠index.html###########################################
<ul class="thumbnails">
<li><a href="images/image01.jpg"><img src="images/thumb01.jpg" alt="" width="250" height="156"></a></a></li>
<li><a href="images/image02.jpg"><img src="images/thumb02.jpg" alt="" width="250" height="156"></a></a></li>
<li><a href="images/image03.jpg"><img src="images/thumb03.jpg" alt="" width="250" height="156"></a></a></li>
</ul>
＠script.js###########################################
function slideImage( value ){
$("ul.images li").animate({"top":value * -480},500);
};
■jQueryでスライドを作る（.attrを取得してみる）
＠画像を用意###########################################
そのまま
＠gallery.css###########################################
そのまま
＠index.html###########################################
そのまま
＠script.js###########################################
$(function(){
$("ul.thumbnails li").click(
function(e){
alert( $( this ).attr("value") ); return false;
}
);
});
■jQueryでlightboxを使ってみる
＠画像を用意###########################################
そのまま
＠lightboxを用意##########################################
style/jquery.lightbox-0.5.css
script/jquery.lightbox-0.5.js
＠index.html###########################################
↓<head>の追加
<link href="style/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery.lightbox-0.5.js" ></script>
↓<body>の追加
<ul class="thumbnails">
<li><a href="images/image01.jpg"><img src="images/thumb01.jpg" alt="" width="250" height="156"></a></a></li>
<li><a href="images/image02.jpg"><img src="images/thumb02.jpg" alt="" width="250" height="156"></a></a></li>
<li><a href="images/image03.jpg"><img src="images/thumb03.jpg" alt="" width="250" height="156"></a></a></li>
</ul>
＠script.js（標準で使う）###########################################
$(function(){
$("ul.thumbnails a").lightBox();
});
＠script.js（カスタマイズして使う）###########################################
$(function(){
$("ul.thumbnails a").lightBox({
overlayBgColor:'#FF0000' ,
overlayOpacity:1 ,
imageLoading:'http://example.com/images/loading.gif'
});
});
===========================================================================
■jQueryでスライドを作る（.attrを取得してみる）スライドトランジション
＠index.html###########################################
↓<head>に追加
<script type="text/javascript " src="../script/jquery.easing.1.3.js"></script>
↓<body>に追加
<div id="wrapper">
<div class="images">
<ul>
<li><img src="../images/image01.jpg" width="638" height="428"></li>
<li><img src="../images/image02.jpg" width="638" height="428"></li>
<li><img src="../images/image03.jpg" width="638" height="428"></li>
<li><img src="../images/image04.jpg" width="638" height="428"></li>
<li><img src="../images/image05.jpg" width="638" height="428"></li>
</ul>
</div><!-- /.images -->
<div class="thumbnails">
<ul>
<li value="0"><img src="../images/thumbnail01.jpg" width="118" height="78"></li>
<li value="1"><img src="../images/thumbnail02.jpg" width="118" height="78"></li>
<li value="2"><img src="../images/thumbnail03.jpg" width="118" height="78"></li>
<li value="3"><img src="../images/thumbnail04.jpg" width="118" height="78"></li>
<li value="4"><img src="../images/thumbnail05.jpg" width="118" height="78"></li>
</ul>
</div><!-- /.thumbnails -->
</div><!-- /#wrapper -->
</body>
＠style.css###########################################
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #000;
height: 100%;
}
#wrapper {
background: #222;
height: 540px;
width: 100%;
padding:0 10px;
position: absolute;
top: 50%;
margin-top: -270px;
}
img {
border: solid 1px #444;
vertical-align: middle;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
/* .images ----------------------------- */
.images {
width: 640px;
height: 430px;
overflow: hidden;
margin: 10px auto;
}
.images ul {
position: relative;
width: 3200px;
}
.images ul li{
float: left;
}
/* .thumbnails ----------------------------- */
.thumbnails {
width: 640px;
height: 80px;
overflow: hidden;
margin: 0 auto;
}
.thumbnails ul {
width: 650px;
}
.thumbnails ul li{
float: left;
margin-right: 10px;
}
＠script.js###########################################
$(function(){
$(".thumbnails li").click(
function(e){
//thumbnailsのvalue値を使って、slideImage()を呼び出す
slideImage( $(this).attr("value") );
}
);
//thumbnailsのvalue値を使って、imagesのulタグを動かす
//
function slideImage( value ){
//さらっと動く
/* $(".images ul").animate({"left":value * -640},1000); */
//ぴょんぴょんって動く
$(".images ul").animate({"left":value * -640},1000,"easeInOutElastic");
}
});
==========================================================================
＜以上＞