「jQueryを学ぶ4」の編集履歴(バックアップ)一覧はこちら

jQueryを学ぶ4」(2015/07/15 (水) 22:59:26) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

今回はjQueryで様々なコンテンツを作っていきたいと思います。マウスを載せた時に画像を拡大したり縮小したりするものを書いていきたいと思います。7月15日記事 ~ ~ イメージ(マウスをのせる前) #image(width=400,004.png) イメージ(マウスを載せた後) #image(width=400,005.png) ~ ~ 目次 #contents ~ ---- ~ *nicepaper内にあるjQuery一覧(2015年7月15日現在) 2015年7月15日(執筆時)時点で、このnicepaper内にあるものは以下のとおりです。 +[[jQueryでWEBページ全体をフェードインさせる。:http://www63.atwiki.jp/nicepaper/pages/86.html]] +[[jQueryでタブコンテンツを作ってみる。:http://www63.atwiki.jp/nicepaper/pages/128.html]] +[[jQueryで日付入力フォームを作る:http://www63.atwiki.jp/nicepaper/pages/72.html]] +[[jQueryで画像のスライドショーを実装する:http://www63.atwiki.jp/nicepaper/pages/125.html]] ~ ~ *その他のコンテンツを作ってみる。 何がいいかなぁと悩んでますが、やはり、マウスを載せた時、離した時の挙動があるものを作っていきます。 ~ ~ **mouseover、mouseout(マウスオーバー、マウスアウト)したときのCSSデザインを変更する。その1 マウスを載せた時に画像を拡大したり縮小したりするものを書いていきたいと思います。 HTML部 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $("img").mouseover(function(){ $(this).css("width","240px"); $(this).css("height","180px"); }); $("img").mouseout(function(){ $(this).css("width","180px"); $(this).css("height","120px"); }); }); //--></script> <title>mouseoverとmouseout</title> </head> <body> <div id="wrapper"> <div id="navi"> <a href="#"><img src="flower1.jpg" alt="花1"></a> <a href="#"><img src="flower2.jpg" alt="花2"></a> </div> </div> </body> </html> マウスオーバーしたときとマウスアウトしたときの処理をそれぞれ書いています。 このように&color(red){カッコ書きをそれぞれ作って書いていけば、}思うように表現ができます。 ~ CSS部 @charset "utf-8"; /* CSS Document */ #wrapper{ margin: 10px auto; border: 1px solid #000; width: 600px; height: 400px; position:relative; } #navi{ position:absolute; width:500px; height:300px; top: 100px; /* background: #f00;*/ } img{ object-fit: scale-down; width: 180px; height: 120px; margin:10px; float:left; } 解説:画像が大きすぎるのでobject-fitをscaleダウンにしました。高さや幅をその中に画像が収まるように変えました。こうすることで、二つ画像を用意しなくても済みます。 **mouseover、mouseout(マウスオーバー、マウスアウト)したときのCSSデザインを変更する。その2 次はMacの下部分にあるメニュー画面(Dock)のように、下から浮き出て拡大する感じにしていきます。また、表記に関しても少しだけ変更していきます。 ~ HTML部 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $("img").mouseover(function(){ $(this).css("width","240px").css("height","180px").css("margin-top","-60px"); //こんな感じでつなげて書いてもいい。 }); $("img").mouseout(function(){ $(this).css("width","180px"); $(this).css("height","120px"); $(this).css("margin-top","0px"); }); }); //--></script> <title>mouseoverとmouseout</title> </head> <body> <div id="wrapper"> <div id="navi"> <a href="#"><img src="flower1.jpg" alt="花1"></a> <a href="#"><img src="flower2.jpg" alt="花2"></a> </div> </div> </body> </html> CSS部 @charset "utf-8"; /* CSS Document */ #wrapper{ margin: 10px auto; border: 1px solid #000; width: 600px; height: 400px; position:relative; } #navi{ position:absolute; width:500px; height:300px; top: 100px; /* background: #f00;*/ } img{ object-fit: scale-down; width: 180px; height: 120px; margin-left:10px; float:left; } ドットでつなげて書いていっても動作できます。
今回はjQueryで様々なコンテンツを作っていきたいと思います。マウスを載せた時に画像を拡大したり縮小したりするものを書いていきたいと思います。7月15日記事 ~ ~ イメージ(マウスをのせる前) #image(width=400,004.png) イメージ(マウスを載せた後) #image(width=400,005.png) ~ ~ 目次 #contents ~ ---- ~ *nicepaper内にあるjQuery一覧(2015年7月15日現在) 2015年7月15日(執筆時)時点で、このnicepaper内にあるものは以下のとおりです。 +[[jQueryでWEBページ全体をフェードインさせる。:http://www63.atwiki.jp/nicepaper/pages/86.html]] +[[jQueryでタブコンテンツを作ってみる。:http://www63.atwiki.jp/nicepaper/pages/128.html]] +[[jQueryで日付入力フォームを作る:http://www63.atwiki.jp/nicepaper/pages/72.html]] +[[jQueryで画像のスライドショーを実装する:http://www63.atwiki.jp/nicepaper/pages/125.html]] ~ ~ *その他のコンテンツを作ってみる。 何がいいかなぁと悩んでますが、やはり、マウスを載せた時、離した時の挙動があるものを作っていきます。 ~ ~ **mouseover、mouseout(マウスオーバー、マウスアウト)したときのCSSデザインを変更する。その1 マウスを載せた時に画像を拡大したり縮小したりするものを書いていきたいと思います。 HTML部 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $("img").mouseover(function(){ $(this).css("width","240px"); $(this).css("height","180px"); }); $("img").mouseout(function(){ $(this).css("width","180px"); $(this).css("height","120px"); }); }); //--></script> <title>mouseoverとmouseout</title> </head> <body> <div id="wrapper"> <div id="navi"> <a href="#"><img src="flower1.jpg" alt="花1"></a> <a href="#"><img src="flower2.jpg" alt="花2"></a> </div> </div> </body> </html> マウスオーバーしたときとマウスアウトしたときの処理をそれぞれ書いています。 このように&color(red){カッコ書きをそれぞれ作って書いていけば、}思うように表現ができます。 ~ CSS部 @charset "utf-8"; /* CSS Document */ #wrapper{ margin: 10px auto; border: 1px solid #000; width: 600px; height: 400px; position:relative; } #navi{ position:absolute; width:500px; height:300px; top: 100px; /* background: #f00;*/ } img{ object-fit: scale-down; width: 180px; height: 120px; margin:10px; float:left; } 解説:画像が大きすぎるのでobject-fitをscaleダウンにしました。高さや幅をその中に画像が収まるように変えました。こうすることで、二つ画像を用意しなくても済みます。 **mouseover、mouseout(マウスオーバー、マウスアウト)したときのCSSデザインを変更する。その2 次はMacの下部分にあるメニュー画面(Dock)のように、下から浮き出て拡大する感じにしていきます。また、表記に関しても少しだけ変更していきます。 ~ HTML部 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ $("img").mouseover(function(){ $(this).css("width","240px").css("height","180px").css("margin-top","-60px"); //こんな感じでつなげて書いてもいい。 }); $("img").mouseout(function(){ $(this).css("width","180px"); $(this).css("height","120px"); $(this).css("margin-top","0px"); }); }); //--></script> <title>mouseoverとmouseout</title> </head> <body> <div id="wrapper"> <div id="navi"> <a href="#"><img src="flower1.jpg" alt="花1"></a> <a href="#"><img src="flower2.jpg" alt="花2"></a> </div> </div> </body> </html> CSS部 @charset "utf-8"; /* CSS Document */ #wrapper{ margin: 10px auto; border: 1px solid #000; width: 600px; height: 400px; position:relative; } #navi{ position:absolute; width:500px; height:300px; top: 100px; /* background: #f00;*/ } img{ object-fit: scale-down; width: 180px; height: 120px; margin-left:10px; float:left; } ドットでつなげて書いていっても動作できます。 ~ ~ 以上

表示オプション

横に並べて表示:
変化行の前後のみ表示: