zoukankan      html  css  js  c++  java
  • html中map area 热区自适应的原生js实现方案

    在做自适应网页的时候,如果在图片中使用了热区map。图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应。这篇文章就介绍通过原生js来实现:MAP中每个area的坐标也随页面等比例的变化效果。

    map area 热区自适应的实现代码

    html:

    <style>
    img{
    	display:block;max-1920; 100%;border: 0;
    }	
    </style>
    <img src="src/1.jpg" usemap="#planetmap"/>
    <map name="planetmap" id="planetmap">
    	<area shape="rect" coords="0,0,110,200" href="#"/>
    	<area shape="rect" coords="50,50,200,200" href="#"/>
    </map>
    

      

    js:

    <script>
    var initwidth=null,//初始图片宽度
    	area=document.getElementsByTagName('area'),
    	initarea=null;//初始数据保存
    	
    function init(){//初始化
    	initwidth=1920;
    	initarea=new Array(area.length-1);
    	for(var i=0;i<area.length;i++){
    		initarea[i]=area[i].getAttribute("coords");
    	}
    }
    
    function setCoords(){//根据分辨率自适应热区坐标
        var width=document.body.offsetWidth,
        	percent=width/initwidth;
        for(var i=0;i<area.length;i++){
        	var coords=initarea[i],
        		arr=coords.split(",");
            for(var j=0;j<arr.length;j++){
                arr[j] *= percent;    
            }
            area[i].setAttribute("coords",arr.join(","));
        }
    } 
    //使用
    init();
    window.onresize = function () {  
        setCoords();
    }  
    </script>
    

    资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh

    大家在实际开发,请参照代码根据直接的需求改进。如果html页面中存在多个图片需要area,请自行封装实现!

  • 相关阅读:
    PHP做ERP, CRM, CMS系统需要注意哪些地方
    java封装小实例
    java中数组的数组问题
    switch语句小练习
    java交换两个变量值a,b的多钟方法
    java中 i = i++ 的结果
    每日java基础知识(01)
    计算机存储负数以及int转byte时-128的出现
    python RSA 加密
    CentOS 7 安装 建立svn仓库 远程连接
  • 原文地址:https://www.cnblogs.com/ypppt/p/13251575.html
Copyright © 2011-2022 走看看