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

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

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

javaweb js完成鼠标移入后在鼠标当前置旁边显示标签内容_第1张图片


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

javaweb js完成鼠标移入后在鼠标当前置旁边显示标签内容_第2张图片


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

javaweb js完成鼠标移入后在鼠标当前置旁边显示标签内容_第3张图片


	/**
	 * 显示指标说明,计算弹窗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);
		});
		//当前元素标签离左边的距离+当前元素标签的宽=要显示的元素离左边的距离
		var left = $(this).offset().left + $(this).width();
		/**
		 * 当前元素标签离上面的距离+[(鼠标当前位置离上面的距离-当前元素标签离上面的距离)=鼠标离当前元素标签的Y距离]=要显示的元素离上面的距离
		 */
		var top = $(this).offset().top + (e.pageY -  $(this).offset().top);
		$('.move-win').css({'top':function(){
			//当前窗口的高度+当前窗口滚动条的高度-top=鼠标当前位置离底部的距离也就是底部的高度
			var bottom  = $(window).height()+$(document).scrollTop() - top;
			//如果底部的高度小于或等于当前要显示窗口的高度,用要显示窗口的高度-bottom=正常显示将会溢的高度
			if(bottom  <= $(this).height()){
				//用top - 显示窗口的高度 - 要溢的高度 = 最终要显示的top值
				top -= $(this).height() - bottom; //鼠标在最底或最顶部时,显示窗口不被溢出
			}
			return top;
		},'left':left}).show();
	}).mouseout(function(){
		$('.move-win').hide();
	});

我也不知道这样解释大家听不听的懂。。。不懂的可以加我企鹅号 554911540


你可能感兴趣的:(javascript)