nicepaper @ ウィキ
nicepaper @ ウィキ

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

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

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



目次



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

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

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

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

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

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>

マウスオーバーしたときとマウスアウトしたときの処理をそれぞれ書いています。 このように カッコ書きをそれぞれ作って書いていけば、 思うように表現ができます。
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を学ぶ4」をウィキ内検索
最終更新：2015年07月15日 22:59
添付ファイル