HTML5热点 area自适应 jq

来源：互联网发布：专升本远程网络教育编辑：程序博客网时间：2024/06/11 08:07

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

阅读全文

0 0