javaweb js完成鼠标移入后在鼠标当前置旁边显示标签内容

最新推荐文章于 2025-06-03 16:56:42 发布

江西DJ烟仔ReMix

最新推荐文章于 2025-06-03 16:56:42 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u014598014/article/details/79497415

js完成鼠标移入后在鼠标当前置旁边显示标签内容，当鼠标底部或最上位置时，窗口不会被溢出。

效果图一，鼠标在《制度建立》一栏，属于最上面，窗口不会移到外面去

效果图二，鼠标在《非税收入》一栏，属于最底部，窗口不会向下溢出

效果图三，鼠标在中间显示效果

	/**
	 * 显示指标说明，计算弹窗x y坐标
	 */
	$('.main-content a').mouseover(function(e){
		var tsqNum = $(this).data('tsrquotanum');
		$.post(path+'/tsQuoTa/selectByTsqNum',{'tsqNum':tsqNum},function(dataJson){
			$('.move-win p').text(dataJson.dataList[0].tsqExplain);
			$('.move-win h1').text(dataJson.dataList[0].tsqName);
		});
		//当前元素<a>标签离左边的距离+当前元素<a>标签的宽=要显示的元素离左边的距离
		var left = $(this).offset().left + $(this).width();
		/**
		 * 当前元素<a>标签离上面的距离+[(鼠标当前位置离上面的距离-当前元素<a>标签离上面的距离)=鼠标离当前元素<a>标签的Y距离]=要显示的元素离上面的距离
		 */