HTML <map> 標籤 多熱點定位手機自適應
阿新 • • 發佈：2020-11-18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<title>《續寫春天的故事》·區委書記篇</title>
<link type="text/css" rel="stylesheet" href="css/index.css" />
</head>
<style>
body {
overflow-y: scroll;
overflow-x: hidden;
}
.tab {
position: absolute;
top: 20%;
width: 7%;
}
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
-moz-outline-style: none;
}
</style>
<body>
<div class="connent">
<span id="lbresult">
<img class="interview_img" src="images/interview_new.jpg" style="height:auto;">
</span>
<div class="area_tab">
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var width = $("body").width();
var tab1 = ["96", "152", "http://static.scms.sztv.com.cn/ysz/zx/zw/78335105.shtml"];
var tab2 = ["208", "228", "http://static.scms.sztv.com.cn/ysz/zx/zw/78333232.shtml"];
var tab3 = ["346", "196", "http://static.scms.sztv.com.cn/ysz/zx/zw/78332211.shtml"];
var tab4 = ["474", "254", "http://static.scms.sztv.com.cn/ysz/zx/zw/78334179.shtml"];
var tab5 = ["604", "194", "http://static.scms.sztv.com.cn/ysz/zx/zw/924.shtml"];
var tab6 = ["96", "570", "http://static.scms.sztv.com.cn/ysz/zx/zw/78330181.shtml"];
var tab7 = ["214", "612", "http://static.scms.sztv.com.cn/ysz/zx/zw/78329490.shtml"];
var tab8 = ["346", "636", "http://static.scms.sztv.com.cn/ysz/zx/zw/78326846.shtml"];
var tab9 = ["476", "590", "http://static.scms.sztv.com.cn/ysz/zx/zw/78327604.shtml"];
var tab10 = ["600", "628", "http://static.scms.sztv.com.cn/ysz/zx/zw/78336913.shtml"];
var tab11 = ["490", "878", "http://static.scms.sztv.com.cn/ysz/zx/zw/2884.shtml"];
var rate = width / 750;
for (var i = 0; i < 11; i++) {
(function(i) {
var j = i + 1;
var html = '<div class="tab' + j + ' tab"><img src = "images/tab/' + j + '.png" style = "height:auto;"></div>';
$(".area_tab").append(html);
var idstr = "tab" + j;
var idvalue = eval(idstr);//eval獲取變數名
$("." + idstr).css({
"left": rate * idvalue[0] + "px",
"top": rate * idvalue[1] + "px"
});
$("." + idstr).unbind().bind("click", function() {
window.location.href = idvalue[2];
});
})(i);
}
</script>
重點：設計圖尺寸（750 X 1344）來初始化定位，手機自使用後再次重新計算定位，
重新計算定位後用JS插入HTML程式碼至頁面
var html = '<div class="tab' + j + ' tab"><img src = "images/tab/' + j + '.png" style = "height:auto;"></div>';
，重新通過JS寫入定位CSS程式碼
"left": rate * idvalue[0] + "px",
"top": rate * idvalue[1] + "px"