关闭

html中map area 热区自适应的原生js实现方案

时间: 2018-05-22阅读: 4360标签: 自适应

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


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

html:

<style>
img{
	display:block;max-width:1920;width: 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>


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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/801

字体大小自适应纯css解决方案

但是该方案存在一个bug,上面的代码,当浏览器窗口变化的时候,box中的文字并没有按照应有的比例变化,但是css3标准中是这么说的:When the height or width of the viewport is changed, they are scaled accordingly.

echarts 表格自适应需要注意的问题

最近在做大屏可视化,页面数据展示基本都是用百度的echarts,因为页面要做自适应,所以当视窗变化的时候echarts也要变化。window.onresize 可以解决这个问题。而一般一个页面不可能只引用一个表格,当你引用多个的时候,有些地方需要注意。

vuejs中拖动改变元素宽度实现宽度自适应大小

拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时

高度自适应

高度不去设置,或者高度设置auto 内容撑开父元素的高度。内容撑开父元素的高度 -> 最小高度的设置 min-height,浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度,会出现高度塌陷

CSS自适应正方形问题

移动端项目中经常遇到自适应的问题,下面我们来看看关于自适应的方法:在盒模型中,margin、padding的百分比数值是相对于父元素的宽度计算的,所以将padding值设为与width值相同的百分比即可。

打造自适应网站只用一个 CSS 属性就够了

用一个CSS属性创建一个响应式网站,让我们来看看它是如何做到的。以这个模板为例,没有应用css属性。

让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和&nbsp;等HTML元素来添加换行和打印空格。textarea也能跟prev一样保留内容格式,但是元素高度是固定的

CSS3 @media媒体查询

@media 媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面,@media 是个不错的选择

CSS实现宽高等比自适应容器

在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半。于是我们就需要实现一个宽度自适应,高度为宽度一半的容器。

CSS实现自适应分隔线的N种方法

伪元素+transform:translateX(-100%);主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!