圖紙上的編碼與列表數據關聯熱點高亮顯示

效果如下： 

 思想是給圖片上加定位的div將數字編碼框起來

<div id="" style="display: flex;">
	<div id="drawings" style="border-right: 1px solid rgba(0,0,0,.15);overflow: scroll;position: relative;">
		<!--<img style="" src="" />數據放圖片-->
		<!--<div style="position:absolute">將小方塊的高亮放置圖片上</div>-->
	</div>
	<div id="drawingslist">
		<table class="layui-table">
			<thead>
				<tr>
					<th>位置</th>
					<th>零件OE號</th>
					<th>名稱</th>
				</tr>
			</thead>
			<tbody id="drawingslistmsg">
				<!--<tr>
					<td>1</td>
					<td>8X0010515</td>
					<td>空調器標籤帶以下語言的標註</td>
				</tr>-->
			</tbody>
		</table>
	</div>
</div>

 

//獲取圖片上編號的位置
function abc(t) {
	
	$('#drawings').html('<img style="width: 100%;" src="' + drawimg + '"/>');//放圖片
	
	
	var zh = $('#drawings').find("img").height(); //真實高度
	var zw = $('#drawings').find("img").width(); //真實寬度
	//imgPoints.hotspotsh已知數據   imageHeight: "3508" imageWidth: "2481"
	//			sKey: "4"
	//			hsX: "1616"
	//			hsY: "1330"
	//			maxX: "1716"
	//			maxY: "1430"

	//得到圖片縮小後倍數
	var hb = parseInt(point.imageHeight) / zh;
	var wb = parseInt(point.imageWidth) / zw;
	//圖片位置數據
	var zbp = point.hotspots;
	//圖片位置座標
	for(var i = 0; i < zbp.length; i++) {
		var x1 = parseInt(zbp[i].hsX) / wb;
		var y1 = parseInt(zbp[i].hsY) / hb;
		var x2 = parseInt(zbp[i].maxX) / wb;
		var y2 = parseInt(zbp[i].maxY) / hb;

		var imgtop = y1;
		var imgleft = x1;
		var imgw = x2 - x1;
		var imgh = y2 - y1;

		var imgtxt = '<div class="posi" id="drawingsdbs' + i + '" style="height: ' + imgh + 'px;width: ' + imgw + 'px;position: absolute;top: ' + imgtop + 'px;left: ' + imgleft + 'px; border:1px solid #1890FF;cursor: pointer;" data-hskey="' + zbp[i].hsKey + '" οnclick="ccd(this)" ></div>';
		$('#drawings').append(imgtxt);	//	放小方塊標記位置
	}
}
//點擊圖紙編號
function ccd(t) {
	$(t).parents().find('.posi').css("border", "1px solid #1890FF"); //清空所有高亮
	$(t).css("border", "1px solid #FF5722"); //增加高亮
	var hskey = $(t).attr('data-hskey'); //獲取圖紙編號
	$('#drawingslistmsg').parents().find('tr').css('color', '#000'); //清空列表所有高亮
	//循環找到列表中對應編號並增加高亮
	$('#drawingslistmsg').find('tr').each(function() {
		var kk = $(this).attr('data-itid')
		if(kk == hskey) {
			$(this).css('color', '#FF5722') //增加列高亮

			var a = $(this).offset().top; //計算列序號距離上方距離
			//判斷列表序號是否在可視範圍
			if(a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {           
                //console.log("div在可視範圍");
				        } else {
				if(parseInt(a) < 700) {
					console.log(a);
					$(".drawingslist").scrollTop(-29); //滾動條距離上方的位置
				} else {
					$(".drawingslist").scrollTop(a);
				}
			}
		}
	})
}
//點擊列表編號
function hskeys(t) {
	var hske = $(t).attr('data-itid'); //獲取編號
	$(t).parents().find('tr').css('color', '#000'); //清空所有高亮
	$(t).css('color', '#FF5722'); //	增加高亮

	$('#drawings').parents().find('.posi').css("border", "1px solid #1890FF"); //	清空圖片上的高亮

	$('#drawings').find('.posi[data-hskey="' + hske + '"]').css("border", "1px solid #FF5722") //找到編碼一樣的增加高亮

	$ids = $('#drawings').find('.posi[data-hskey="' + hske + '"]').attr("id"); //獲取id屬性

	layer.tips($(t).attr("data-label"), '#' + $ids); //增加小tips
}