nicepaper @ ウィキ
nicepaper @ ウィキ

前回記事付箋のようにマウスを載せたら剥がされる仕組みを作る1ではCSSのみで実装していましたが、今回はjQueryも使って実装していきます。11月13日記事

イメージ
クリックする前

クリックした後



目次




概要

今度はjQueryのclickイベントを使って行っていきます。

コード

HTML 

<!DOCTYPE HTML>
<html>
<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(){
	$(".husen").click(function(){
		$(this).css('display','none');
	});
});
</script>
<title>jQueryでタップやマウスを載せたら消える付箋</title>
</head>
<body>
	<div id="wrapper">
		<section class="photo">
        </section>
        <section class="words">
        	<dl>
            	<dt>aaaaa</dt><dd>bbbbbb</dd>
            </dl>
        	<p class="husen">click or tap</p>
        </section>
        <section class="comment">
        	<p>コメントコメントコメントコメントコメントコメント</p>
        </section>
    </div>
</body>
</html>

CSS 

@charset "utf-8";
/* CSS Document */

#wrapper{
	margin: 10px auto;
	padding: 20px;
	border:1px solid #000;
	width:480px;
	min-height: 400px;
}
section.photo{
	margin:10px auto;
	width:480px;
	height:320px;
	background: #FCC;
}
section.words{
	position:relative;
}
section.words dl{
	margin:10px auto;
	width:480px;
	background: #cfc;
}
section.words dt{
	float:left;
	padding: 10px;
	width: 220px;
	height: 30px;
	background: #CCC;
	text-align: center;
}
section.words dd{
	float:left;
	padding: 10px;
	width: 220px;
	height: 30px;
	background: #FFF;
	text-align: center;
}
section.words p.husen{
	position:absolute;
	display:block;
	padding: 10px;
	width:220px;
	height: 30px;
	background:#FF0;
	left: 240px;
}
section.comment{
	margin: 10px auto;
	padding: 5px;
	clear:both;
	width: 470px;
	height: 50px;
	background: #ccf;
}

まとめ

実現はできますが、クリックすると消えるだけで、再びタップしても元には戻れません。 display:noneにするとタグが消えてしまいますので、再びタップしても戻れる状況を作る必要もあると思います。

以上

「付箋のようにクリックORタップしたら透過する仕組みを作る2」をウィキ内検索
最終更新：2015年11月13日 15:29
添付ファイル