HTML5热点 area自适应 jq

最新推荐文章于 2022-12-05 14:43:40 发布

zxlsara

最新推荐文章于 2022-12-05 14:43:40 发布

阅读量3.5k

点赞数 1

分类专栏：锋利的jQ 文章标签： html5 热点图 map

本文链接：https://blog.csdn.net/zxlsara/article/details/72832200

版权

锋利的jQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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。希望有问题在下面留言。

zxlsara

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
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:
复制链接

扫一扫

专栏目录