224 lines
6.8 KiB
JavaScript
224 lines
6.8 KiB
JavaScript
|
|
|||
|
|
var moveDraw=true;
|
|||
|
|
// canvas画布
|
|||
|
|
$(function () {
|
|||
|
|
|
|||
|
|
// if ($(".pic-info-ctrl-prev").attr("href").indexOf("已经")>=0){$(".pic-info-ctrl-prev").hide()}
|
|||
|
|
// if ($(".pic-info-ctrl-next").attr("href").indexOf("已经")>=0){$(".pic-info-ctrl-next").hide()}
|
|||
|
|
|
|||
|
|
//$("#MapLeave").append('<div id="mapLeaveMask" style="width: 100%;height: 100%;position: absolute;top: 0;background: transparent;z-index:9999999999999;"></div>');
|
|||
|
|
var bantu = $('#Bantu')[0] || {}
|
|||
|
|
$('#Bantu').css({ opacity: 0, position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: '16px', zIndex: 9 });
|
|||
|
|
var timer=setInterval(function(){
|
|||
|
|
if(bantu.offsetHeight){
|
|||
|
|
clearInterval(timer)
|
|||
|
|
$('#Bantu').before('<img id="BantuTop" src="'+$('#Bantu').attr("src")+'" style="width:'+bantu.offsetWidth+'px;height:'+bantu.offsetHeight+'px;" />')
|
|||
|
|
$('#Bantu').after('<canvas id="coorCanvas" width="'+bantu.offsetWidth+'px" height="'+bantu.offsetHeight+'px" style="position: absolute;top: 15px;left:50%;transform: translateX(-50%); opacity: 1;"></canvas>');
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},100)
|
|||
|
|
var obj = document.getElementsByName('newbook');
|
|||
|
|
|
|||
|
|
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)) {
|
|||
|
|
//alert('你是使用IE')
|
|||
|
|
obj[0].onmouseover = function () { drawArea(event.srcElement, event); };
|
|||
|
|
obj[0].onmousemove = function () { showTitle(event.srcElement, event); };
|
|||
|
|
obj[0].onmouseout = function () { clearAndHide(); };
|
|||
|
|
} else if (navigator.userAgent.indexOf('Firefox') >= 0) {
|
|||
|
|
//alert('你是使用Firefox')
|
|||
|
|
obj[0].onmouseover = function () { drawArea(event.srcElement, event); };
|
|||
|
|
obj[0].onmousemove = function () { showTitle(event.srcElement, event); };
|
|||
|
|
obj[0].onmouseout = function () { clearAndHide(); };
|
|||
|
|
document.getElementById("leveldiv").onmouseout = function () { MouseOutMap(); };
|
|||
|
|
} else if (navigator.userAgent.indexOf('Opera') >= 0) {
|
|||
|
|
//alert('你是使用Opera')
|
|||
|
|
obj[0].onmouseover = function () { drawArea(event.srcElement, event); };
|
|||
|
|
obj[0].onmousemove = function () { showTitle(event.srcElement, event); };
|
|||
|
|
obj[0].onmouseout = function () { clearAndHide(); };
|
|||
|
|
} else {
|
|||
|
|
//alert('你是使用其他的浏览器浏览网页！')
|
|||
|
|
obj[0].onmouseover = function () { drawArea(event.srcElement, event); };
|
|||
|
|
obj[0].onmousemove = function () { showTitle(event.srcElement, event); };
|
|||
|
|
obj[0].onmouseout = function () { clearAndHide(); };
|
|||
|
|
}
|
|||
|
|
$('img[usemap]').rwdImageMaps();
|
|||
|
|
|
|||
|
|
|
|||
|
|
//列表高亮
|
|||
|
|
$(".main-list li").hover(
|
|||
|
|
function (e) {
|
|||
|
|
$(this).addClass("li-active");
|
|||
|
|
var List_id = $(this).attr("targetid");
|
|||
|
|
$("map area").each(function () {
|
|||
|
|
var Map_href = $(this).attr("href");
|
|||
|
|
var articleHref = Map_href.substring(Map_href.lastIndexOf('/') + 1, Map_href.length);
|
|||
|
|
if (List_id === articleHref) {
|
|||
|
|
drawArea(this,e)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
function () {
|
|||
|
|
clearCanvas()
|
|||
|
|
$(this).removeClass("li-active");
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
dealTitle();
|
|||
|
|
// 加载语音
|
|||
|
|
//InitReadTxt();
|
|||
|
|
|
|||
|
|
//检查当前浏览器版本;
|
|||
|
|
//var currHref = location.href;
|
|||
|
|
//if (currHref.indexOf('/node_1.htm') >= 0) {
|
|||
|
|
// if ($.browser.msie && $.browser.version <= '7.0') {
|
|||
|
|
// alert('您的浏览器版本过低, 为了更好体验,请升级IE浏览器或者选择chrome浏览器!');
|
|||
|
|
// }
|
|||
|
|
//}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//浏览器当前窗口可视区域宽度
|
|||
|
|
if ($(window).width() < 1100) {
|
|||
|
|
var s = '';
|
|||
|
|
var per_href = $('.toprevblock a').attr('href');
|
|||
|
|
if (per_href != null) {
|
|||
|
|
s = s + "<a class='preart_rg' href=" + per_href + "><a>"
|
|||
|
|
}
|
|||
|
|
var next_href = $('.tonextblock a').attr('href');
|
|||
|
|
if (next_href != null) {
|
|||
|
|
s = s + "<a class='nextart_rg' href=" + next_href + "><a>"
|
|||
|
|
}
|
|||
|
|
$('.to_oe').after(s);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$("#Mask").hide();
|
|||
|
|
//遮罩层出现禁止滑动
|
|||
|
|
$('#Mask').bind("touchmove", function (e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
window.onload=function(){
|
|||
|
|
$("#mapLeaveMask").remove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//右侧文章列蒙层
|
|||
|
|
function PageArticleTitle(targetId) {
|
|||
|
|
$(".main-list li").each(function () {
|
|||
|
|
var articleId = $(this).attr("targetid");
|
|||
|
|
if (articleId != targetId) {
|
|||
|
|
$(this).removeClass("li-active");
|
|||
|
|
} else {
|
|||
|
|
$(this).addClass("li-active");
|
|||
|
|
$("#showMap a").attr("title", $(this).find("a").html());
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//--处理title 中含有<br>情况；
|
|||
|
|
function dealTitle() {
|
|||
|
|
$(".main-list li H2 a").each(function () {
|
|||
|
|
var info = $(this).html();
|
|||
|
|
while (info.indexOf('<br>') > 0 || info.indexOf('<BR>') > 0) {
|
|||
|
|
info = info.replace('<br>', '').replace('<BR>', '');
|
|||
|
|
}
|
|||
|
|
$(this).html(info);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showTitle(obj,e){
|
|||
|
|
if(moveDraw){
|
|||
|
|
drawArea(obj,e);
|
|||
|
|
moveDraw=false;
|
|||
|
|
}
|
|||
|
|
var areaObj = obj;
|
|||
|
|
var str = areaObj.coords;
|
|||
|
|
var title=areaObj.dataset.title;
|
|||
|
|
//debugger
|
|||
|
|
$('#showMap').html(title);
|
|||
|
|
var left=e.offsetX;
|
|||
|
|
var top=e.offsetY+10;
|
|||
|
|
$('#showMap').css({
|
|||
|
|
left:left,
|
|||
|
|
top:top,
|
|||
|
|
zIndex:99999
|
|||
|
|
})
|
|||
|
|
if(title){
|
|||
|
|
$('#showMap').show();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function drawArea(obj, e) {
|
|||
|
|
clearCanvas();
|
|||
|
|
var areaObj = obj;
|
|||
|
|
var str = areaObj.coords;
|
|||
|
|
var strs = str.split(",");
|
|||
|
|
const canvas = window.document.getElementById("coorCanvas");
|
|||
|
|
if (!canvas) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
const context = canvas.getContext("2d");
|
|||
|
|
context.globalAlpha = 0.3;
|
|||
|
|
context.beginPath();
|
|||
|
|
|
|||
|
|
if (areaObj.shape === "rect") {
|
|||
|
|
// 处理矩形
|
|||
|
|
if (strs.length === 4) {
|
|||
|
|
const x1 = Number(strs[0]);
|
|||
|
|
const y1 = Number(strs[1]);
|
|||
|
|
const x2 = Number(strs[2]);
|
|||
|
|
const y2 = Number(strs[3]);
|
|||
|
|
context.rect(x1, y1, x2 - x1, y2 - y1);
|
|||
|
|
} else {
|
|||
|
|
console.error("Invalid rect coords format. Expected 4 values.");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
} else if (areaObj.shape === "poly") {
|
|||
|
|
// 处理多边形
|
|||
|
|
context.moveTo(Number(strs[0]), Number(strs[1]));
|
|||
|
|
for (let i = 2; i < strs.length; i += 2) {
|
|||
|
|
context.lineTo(Number(strs[i]), Number(strs[i + 1]));
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.error("Unsupported shape type. Use 'rect' or 'poly'.");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
context.fillStyle = "#45ade2";
|
|||
|
|
context.fill();
|
|||
|
|
context.closePath(); // 闭合路径
|
|||
|
|
|
|||
|
|
var articleHref = obj.href.substring(obj.href.lastIndexOf('/') + 1, obj.href.length);
|
|||
|
|
PageArticleTitle(articleHref);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// function drawArea(obj,e){
|
|||
|
|
// clearCanvas()
|
|||
|
|
// var areaObj = obj;
|
|||
|
|
// var str = areaObj.coords;
|
|||
|
|
// var strs = str.split(",");
|
|||
|
|
// const canvers = window.document.getElementById("coorCanvas");
|
|||
|
|
// if(!canvers){
|
|||
|
|
// return false;
|
|||
|
|
// }
|
|||
|
|
// const context = canvers.getContext("2d");
|
|||
|
|
// context.globalAlpha = 0.3;
|
|||
|
|
// context.beginPath();
|
|||
|
|
// context.moveTo(Number(strs[0]), Number(strs[1]));
|
|||
|
|
// for (i = 2; i < strs.length; i += 2) {
|
|||
|
|
// context.lineTo(Number(strs[i]), Number(strs[i + 1]));
|
|||
|
|
// }
|
|||
|
|
// context.fillStyle = "#45ade2";
|
|||
|
|
// context.fill();
|
|||
|
|
// context.closePath(); //闭合
|
|||
|
|
// var articleHref = obj.href.substring(obj.href.lastIndexOf('/') + 1, obj.href.length);
|
|||
|
|
// PageArticleTitle(articleHref);
|
|||
|
|
// }
|
|||
|
|
function clearCanvas(){
|
|||
|
|
var bantu=$('#Bantu')[0] || {}
|
|||
|
|
const canvers = window.document.getElementById("coorCanvas");
|
|||
|
|
canvers && canvers.getContext("2d").clearRect(0, 0,bantu.offsetWidth, bantu.offsetHeight);
|
|||
|
|
}
|
|||
|
|
function clearAndHide(){
|
|||
|
|
$('#showMap').hide();
|
|||
|
|
clearCanvas()
|
|||
|
|
}
|