关闭

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

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

在做自适应网页的时候,如果在图片中使用了热区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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: 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.

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

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

子级宽度没有自适应内容宽度撑开,只适应到父级100%

子级不设置宽度或者宽度自适应撑开且设置不换行的情况下,子级宽度只会撑开到父级的100%宽度,即上图p标签只会撑开至600px而不是text的撑开宽度

WKWebView加载的网页自适应大小

有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小

CSS中auto是什么意思?

auto 你可以理解为一种 自动/自适应 的概念,比如现在项目需要一个宽度为960px的整体布局居中,你可使用margin:0 auto;来实现。 无论用户浏览器宽度为多少。

css弹性盒模型实现元素宽度(高度)自适应

css实现左侧宽度固定右侧宽度自适应:定位、浮动、margin;css3弹性盒模型实现自适应:上下高度固定中间高度自适应、左侧宽度固定右侧宽度自适应

js 让textarea的高度自适应父元素的高度

textarea按照普通元素设置height是没有作用的,可以这么来设置,下面给上一段项目代码。动态textArea祖先元素节点的高度,myCener是整个页面高度,otherDiv是textArea的祖先元素以外的其他高度

CSS实现自适应正方形、等宽高比矩形

利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult

CSS自适应正方形问题

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

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

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

点击更多...

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