マウスカーソルの隣に吹き出しを表示する

2017.02.24　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボ技術メモです。

今回はマウスカーソルの座標を使って、マウスカーソルの隣に吹き出しを表示してみます。
DEMOはこちら

マウスカーソルの座標を取得する方法については、こちらのページを参考にさせていただきました。
http://hakuhin.jp/js/mouse.html

それでは実装まで解説していきます。

まずはhead内でjquery本体と動作に必要なCSSを読み込ませ、
動作させるためのスクリプトを記述します。

■スクリプト

<link rel="stylesheet" href="../common/css/common.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
//色領域にマウスカーソルがホバーしているなら吹き出しを表示する
$('.area_red').hover( function(){$("#popup_red").show();},function(){$("#popup_red").hide();});
$('.area_green').hover( function(){$("#popup_green").show();},function(){$("#popup_green").hide();});
$('.area_blue').hover( function(){$("#popup_blue").show();},function(){$("#popup_blue").hide();});

$(function(){
	 $('#area').hover(function(){	//色領域にマウスカーソルがホバーしているとき開始
		function MouseMoveFunc(e){	//マウスカーソルが移動するたびに実行する関数

			// マウスカーソルの座標を取得
			var mouse_x = e.clientX + 5;	//マウスカーソルのX座標 5px右へ調整
			var mouse_y = $(window).scrollTop() + e.clientY + 5;	//マウスカーソルのY座標 現在のスクロール位置＋5px下へ調整

			// 吹き出しの位置座標を取得したマウスカーソルの座標に変換
			$("#popup").css({
				"position": "absolute",
		      		"left": mouse_x,
				"top": mouse_y
			});
		}

		if(document.addEventListener){
			document.addEventListener("mousemove" , MouseMoveFunc);
		}else if(document.attachEvent){
			document.attachEvent("onmousemove" , MouseMoveFunc);
		}
	});
});
</script>

//色領域にマウスカーソルがホバーしているなら吹き出しを表示する

$('.area_red').hover( function(){$("#popup_red").show();},function(){$("#popup_red").hide();});

$('.area_green').hover( function(){$("#popup_green").show();},function(){$("#popup_green").hide();});

$('.area_blue').hover( function(){$("#popup_blue").show();},function(){$("#popup_blue").hide();});

$(function(){

$('#area').hover(function(){ //色領域にマウスカーソルがホバーしているとき開始

function MouseMoveFunc(e){ //マウスカーソルが移動するたびに実行する関数

// マウスカーソルの座標を取得

var mouse_x = e.clientX + 5; //マウスカーソルのX座標 5px右へ調整

var mouse_y = $(window).scrollTop() + e.clientY + 5; //マウスカーソルのY座標現在のスクロール位置＋5px下へ調整

// 吹き出しの位置座標を取得したマウスカーソルの座標に変換

$("#popup").css({

"position": "absolute",

"left": mouse_x,

"top": mouse_y

});

}

if(document.addEventListener){

document.addEventListener("mousemove" , MouseMoveFunc);

}else if(document.attachEvent){

document.attachEvent("onmousemove" , MouseMoveFunc);

}

});

</script>

e.clientX、e.clientYでマウスカーソルの座標を取得しています。
さらに数字を加算・減算することで、自由に位置を調整できます。

次に色領域と吹き出しをHTMLに記述します。
■HTML

	<ul id="area" class="clearfix">
		<li class="area_red"></li>
		<li class="area_green"></li>
		<li class="area_blue"></li>
	</ul>

	<div id="popup">
		<p class="upblock" id="popup_red">これは<span>赤</span>です</p>
		<p class="upblock" id="popup_green">これは<span>緑</span>です</p>
		<p class="upblock" id="popup_blue">これは<span>青</span>です</p>
	</div>

</ul>

</div>

最後にHTMLに対応したCSSを記述します。
■CSS

/* 色領域 */
#area{
    width: 300px;
    margin: 0 auto;
}

#area li{
    width: 100px;
    height: 100px;
    float: left;
}

.area_red{ background: #f9d0d1; }
.area_green{ background: #baf9b7; }
.area_blue{ background: #94b3fa; }


/* 吹き出し */

#popup{
    position: absolute;
    z-index: 50;
}

#popup span{
    padding: 0 4px;
}

#popup #popup_red span{ background: #f9d0d1; }
#popup #popup_green span{ background: #baf9b7; }
#popup #popup_blue span{ background: #94b3fa; }

#popup .upblock{
    display: none;
    background: #fff;
    border: 1px solid #333;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}