HTML5热点 area自适应 jq
濮阳默
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.navImage img{
width:100%;
height:auto;
}
.navImage{
/* text-align:center; */
margin-left:-8px!important;
}
body{
margin:0!important;
}
</style>
<body>
<div class="navImage">
<img id="img" src="img/shiyitu1.jpg" alt="navbar" usemap="#navImg">
<map id="navImg" name="navImg">
<area shape="rectangle" coords="160,65,300,120" href="http://www.baidu.com" title="改性沥青生产" alt="改性沥青生产">
<area shape="rectangle" coords="300,140,420,190" href="#" title="沥青运输" alt="沥青运输">
<area shape="rectangle" coords="490,130,620,190" href="#" alt="试验室" title="试验室">
<area shape="rectangle" coords="610,200,780,260" href="#" alt="沥青混合料生产" title="沥青混合料生产">
<area shape="rectangle" coords="815,280,1000,340" href="#" alt="水稳混合料生产" title="水稳混合料生产">
<area shape="rectangle" coords="270,300,420,360" href="#" alt="混合料运输" title="混合料运输">
<area shape="rectangle" coords="320,380,440,450" href="#" alt="路面摊铺" title="路面摊铺">
<area shape="rectangle" coords="520,420,640,470" href="#" alt="路面压实" title="路面压实">
</map>
</div>
</body><script>
areaValue();
var timeout = null;//onresize触发次数过多，设置定时器
window.onresize = function () {
clearTimeout(timeout);
timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化，重新加载页面以刷新MAP
}
function areaValue(){
$("area").each(function(){
var oldValue=new String();
oldValue=$(this).attr("coords");
var newValue=adjustPoint(oldValue);
$(this).attr("coords",newValue);
})
}
function adjustPoint(item){
var pageWidth=$("body").css("width"); //页面的长宽
var pageHeight=$("body").css("height");
var imageWidth = 1022; //图片的长宽
var imageHeigth = 599;
var itemChild = item.split(",");
for(var i=0;i<itemChild.length;i++){
itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageWidth) / parseInt(imageWidth)).toString();
i++;
itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageHeight) / parseInt(imageHeigth)).toString();
}
//生成新的坐标点
var newValue= "";
for (var i = 0; i < itemChild.length; i++) {
newValue += itemChild[i];
if (i < itemChild.length - 1) {
newValue += ",";
}
}
return newValue;
}
</script> 这个方法只是在原作者js方法的基础上改成了jq。希望有问题在下面留言。
类似资料：