2021-01-07【Web作业开发记录】悬浮窗功能

1.需求分析

当鼠标放在一个窗口上面的时候，出现一个悬浮窗，提示商品的具体信息。

2.设计

一开始的时候一脸懵逼，之后借鉴了steam的做法。在需要显示悬浮窗范围的div下，新建一个div儿子节点，即为悬浮窗的div。这个div的position设为absolute，初始display设为none，通过js动态获得位置和内容后，设置top，left属性，写入内容后，再将display设为block（下面直接采用了jquery的fadeIn函数，原理功能是一样的，只不过有个淡入的效果）。

3.代码

html部分

<div id="floatBox" class="MyContainer TooltipBox">
		<div class="Name MyContainer" id="name"></div>
		<div class="Description MyContainer" id="description"></div>
		<div class="Attribute MyContainer" id="attribute"></div>
</div>

css 部分

#floatBox{
	display: none;
	height: 300px;
	width: 200px;
	border: solid black 1px;
	background-color: #dfdcdc;
	border-radius: 10px;
	position: absolute;
}

#floatBox div{
	margin-top: 15px;
	text-align: center;
}
#floatBox div.Attribute{
	font-weight: 10;
}

#floatBox img{
	display: block;
	margin: 10px auto;
}

js部分

$('td img')
	.on('mouseover', (e) => {
		let itemId = $(e.target).parent().parent().attr('id');
		let ajaxData = 'json=' + 
		encodeURI(JSON.stringify({itemId: itemId}));
		$.ajax({
			url: 'GetItem',
			method: 'GET',
			contentType: 'JSON',
			data: ajaxData,
			success: (item, status) => {
				/*找到偏移距离*/
				let x = $(e.target).offset().left + 480;
				let y = $(e.target).offset().top;
				/*设置内容*/
				$('#attribute').text(item.attribute1,
					item.attribute2, item.attribute3
					, item.attribute4, item.attribute5);
				$('#name').text(item.name);
				$('#description').html(item.product.description);
				$('#floatBox')
					.attr('style', 'top:' + y + 'px; left:' + x + 'px;')
					/*淡入*/
					.fadeIn();
			}
		});

	})
	/*鼠标移开的时候淡出就行了，不需要清空内容什么的*/
	.on('mouseout', (e) => {
		$('#floatBox').fadeOut();
})；

4.效果图