configmap加载本地文件

转载

mob64ca1416f1ef 2024-10-31 12:07:59

文章标签 configmap加载本地文件 Map热点区自适应窗口的宽高 a标签 jquery 文章分类 云原生云计算

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/themes/blue/bi/bi.ui.core.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/blue/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="${bipagecontext.skinPath }/bi/bi.ui.image.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/widget/bi.core.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/widget/dialog/bi.ui.opendialog.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/widget/toppanel/bi.ui.toppanel.js"></script>
<title>点击图片</title>
<style type="text/css">
*{
	margin :0;
	padding:0;
	border: 0;


}
html,body{
	width: 100%;
	height: 100%;
}
body{
	background-color: #FFFFFF;/*背景颜色*/
}
a,img{
	width: 100%;
	height: 100%;
	display: block;
}
/*去除点击边框*/
map area{ outline: red; }
</style>
<script type="text/javascript">


var oldPicW = 3840; //原始图片宽
var oldPicH = 2160; //原始图片高


$(function(){
/********************************计算area标签的位置比例系数************************************/
	//获取map标签里的所有area标签
	var $area = $("#planetmap").find("area");
	$.each($area,function(index,data){
		var shape = $(data).attr("shape"); //获取area标签的shape属性（矩形rect，圆形circle，多边形poly）
		var coordsArray  = $(data).attr("coords").replace(/\"/g,"").split(","); //将area标签的coords转换成数组
		var class_ = $(data).attr("class"); //获取area标签的class属性
		if(shape=="rect"){ //矩形rect
			//根据每个area标签的位置坐标计算出在整张图片的位置比例系数
			var coords_Array = [],ratio_Array = []; //coords_Array用于存放根据coords计算出来的比例系数数组
			for(var j=0,len=coordsArray.length;j<len;j++){
				if(j % 2 === 0){ //X坐标值
					coords_Array.push(decimal_common(coordsArray[j]/oldPicW,4));
				}else{ //Y坐标值
					coords_Array.push(decimal_common(coordsArray[j]/oldPicH,4));
				}
			}
			//ratio_Array作为比例系数数组形参重新计算位置坐标
			ratio_Array = coords_Array.concat(ratio_Array);
			reCoords_(class_,ratio_Array,shape,0);
			$(window).resize(function() {
			 	reCoords_(class_,ratio_Array,shape,0);
			});
		}else if(shape=="poly"){ //多边形poly
			//根据每个area标签的位置坐标计算出在整张图片的位置比例系数
			var coords_Array = [],ratio_Array = [];
			for(var j=0,len=coordsArray.length;j<len;j++){
				if(j % 2 === 0){ //X坐标值
					coords_Array.push(decimal_common(coordsArray[j]/oldPicW,4));
				}else{ //Y坐标值
					coords_Array.push(decimal_common(coordsArray[j]/oldPicH,4));
				}
			}
			ratio_Array = coords_Array.concat(ratio_Array);
			reCoords_(class_,ratio_Array,shape,0);
			$(window).resize(function() {
			 	reCoords_(class_,ratio_Array,shape,0);
			});
		}else if(shape=="circle"){ //圆形circle
			//根据每个area标签的位置坐标计算出在整张图片的位置比例系数
			var coords_Array = [],ratio_Array = [];
			for(var j=0;j<2;j++){ //圆只有两个坐标值和一个半径，半径以最大的比率去缩放
				if(j % 2 === 0){ //X坐标值
					coords_Array.push(decimal_common(coordsArray[j]/oldPicW,4));
				}else{ //Y坐标值
					coords_Array.push(decimal_common(coordsArray[j]/oldPicH,4));
				}
			}
			coords_Array.push(coords_Array[0]>=coords_Array[1]?coords_Array[0]:coords_Array[1]);//设置半径的比率


			ratio_Array = coords_Array.concat(ratio_Array);
			reCoords_(class_,ratio_Array,shape,coordsArray[2]);
			$(window).resize(function() {
			 	reCoords_(class_,ratio_Array,shape,coordsArray[2]);
			});
		}
	});
/********************************三个鼠标点击的区域方法************************************/
	$(".img_map_area01").on('click',function(){
		var href_ = $(this).attr("href_");
		var class_ = $(this).attr("class");
		var setting ={
				id :class_,
				url:href_,
				width : 560,
				height :360,
				draggable : true
			 
			}
		$.bi.ui.frameDialog2(setting);
	});


	$(".img_map_area02").on('click',function(){
		var href_ = $(this).attr("href_");
		var class_ = $(this).attr("class");
		var setting ={
				id :class_,
				url:href_,
				width : 560,
				height :360,
				draggable : true
			 
			}
		$.bi.ui.frameDialog2(setting);
	});
	
/********************************鼠标悬浮的区域方法************************************/	
	$(".img_map_area03").hover(
			function(){//鼠标悬浮在元素范围内执行该函数
				var href_ = $(this).attr("href_");
				var class_ = $(this).attr("class");
				var setting ={
						id :class_,
						url:href_,
						width : 560,
						height :360,
						modal : false,
						draggable : true,
						position : {
							my: "left+5 top+5",//左上位置
						    of: event,
						    collision: "fit"
						}
					}
				$.bi.ui.frameDialog2(setting);
			},
			function(){//鼠标移出元素范围内执行该函数
				$.bi.ui.closeDialog("img_map_area03");
			}
		);
		
	$(".img_map_area04").hover(
			function(){
				var href_ = $(this).attr("href_");
				var class_ = $(this).attr("class");
				var setting ={
						id :class_,
						url:href_,
						width : 560,
						height :360,
						modal : false,
						draggable : true,
						position : {
							my: "left+5 top+5",//左上位置
						    of: event,
						    collision: "fit"
						}
					}
				$.bi.ui.frameDialog2(setting);
			},
			function(){
				$.bi.ui.closeDialog("img_map_area04");
			}
		);
	
});


/**
 * [根据比例系数数组重新计算位置坐标coords]
 * @param  {[type]} class_      [area的class]
 * @param  {[type]} ratio_Array [area的比例系数数组]
 * @param  {[type]} shape       [area的shape属性]
 * @param  {[type]} radius      [area为circle时的半径]
 * @return {[type]}             [description]
 */
function reCoords_(class_,ratio_Array,shape,radius){
	var picw = $("#pic").width(); //当前图片的宽度
	var pich = $("#pic").height(); //当前图片的高度
	if(shape=="rect"){
		//根据每个area标签的位置比例系数计算出新的坐标位置
		var xy_arr = ratio_Array.map(function(item,index){
			if(index % 2 === 0){ //X坐标值
				return parseInt(picw*item);
			}else{ //Y坐标值
				return parseInt(pich*item);
			}	
	 	});
		var xy_str = xy_arr.join(","); //拼接出新的坐标位置coords
	 	$("."+class_).attr("coords",'"'+xy_str+'"');
	}else if(shape=="poly"){
		//根据每个area标签的位置比例系数计算出新的坐标位置
		var xy_arr = ratio_Array.map(function(item,index){
			if(index % 2 === 0){ //X坐标值
				return parseInt(picw*item);
			}else{ //Y坐标值
				return parseInt(pich*item);
			}	
	 	});
		var xy_str = xy_arr.join(","); //拼接出新的坐标位置coords
	 	$("."+class_).attr("coords",'"'+xy_str+'"');
	}else if(shape=="circle"){
		//根据每个area标签的位置比例系数计算出新的坐标位置
		var xy_arr = ratio_Array.map(function(item,index){
			if(index == 0){ //X坐标值
				return parseInt(picw*item);
			}else if(index == 1){ //Y坐标值
				return parseInt(pich*item);
			}else{
				return parseInt(radius*item);
			}
	 	});
		var xy_str = xy_arr.join(","); //拼接出新的坐标位置coords
	 	$("."+class_).attr("coords",'"'+xy_str+'"');
	}				
}
 
 /**
  * 小数保留n位，四舍五入
  * @param  {[type]} decimal [十进制小数]
  * @param  {[type]} n       [保留小数点后有效位]
  * @return {[type]}         [十进制保留小数点后n位]
  */
function decimal_common(decimal,n){
	var pv = Math.pow(10,n);
	return Math.round(decimal*pv)/pv;
}
/* 
 * 计算比例像素
 */
/* $(function(){
	var k1 = 780,h1 = 280;
	var k2 = 150,h2 = 414;
	console.log("k1取值为："+k1/1735*3840);
	console.log("h1取值为："+h1/976*2160);
	console.log("k2取值为："+k2/1735*3840);
	console.log("h2取值为："+h2/976*2160);
}) */
</script>
</head>
<body>
	<img src="page_xbjc.png"  id="pic" usemap="#planetmap">
 		 
	<map name="planetmap" id="planetmap">
	
 		<!-- 三个鼠标点击的区域 -->
		<area class="img_map_area01" shape="rect" coords="2421,1411,2724,1590" href_ ="image.jsp" alt="汉堡王"/>
		<area class="img_map_area02" shape="rect" coords="2582,1064,2675,1199" href_ ="image.jsp" alt="维多利亚的秘密"/>
		<!-- 鼠标悬浮的区域 -->
		
		<area class="img_map_area03" shape="poly" coords="2755,1261,2755,1095,2917,1095,3246,765,3246,620,3375,620,3375,929,3038,1261" href_ ="image.jsp" alt="中国东方航空贵宾休息室"/>
		<area class="img_map_area04" shape="circle" coords="660,1020,100" href_ ="image.jsp" alt="心如莲花"/>
		
	</map>
</body>
</html>

文章中的点击事件函数和鼠标悬浮事件函数，可以自己定义，本人用的是公司封装之后的dialog弹出框，如有什么不懂的可以给我留言~

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java StyleFactory createTextSymbolizer完整示例

下一篇：java 一般用哪个 jwt 库

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

configmap加载本地文件

configmap加载本地文件

51CTO博客