nicepaper @ ウィキ
nicepaper @ ウィキ

「jQueryを学ぶ4」の編集履歴（バックアップ）一覧に戻る

jQueryを学ぶ4 - (2015/07/15 (水) 20:38:26) の編集履歴(バックアップ)

今回はjQueryで様々なコンテンツを作っていきたいと思います。マウスを載せた時に画像を拡大したり縮小したりするものを書いていきたいと思います。7月15日記事

イメージ（マウスをのせる前）

イメージ（マウスを載せた後）



目次



nicepaper内にあるjQuery一覧（2015年7月15日現在）

2015年7月15日（執筆時）時点で、このnicepaper内にあるものは以下のとおりです。

  1. jQueryでWEBページ全体をフェードインさせる。
  2. jQueryでタブコンテンツを作ってみる。
  3. jQueryで日付入力フォームを作る
  4. jQueryで画像のスライドショーを実装する

その他のコンテンツを作ってみる。

何がいいかなぁと悩んでますが、やはり、マウスを載せた時、離した時の挙動があるものを作っていきます。

mouseover、mouseout（マウスオーバー、マウスアウト）したときのCSSデザインを変更する。

マウスを載せた時に画像を拡大したり縮小したりするものを書いていきたいと思います。 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>

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;
}