html中map area 热区自适应的原生js实现方案菜鸟教程下载_自适应小白入门

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

html中map area 热区自适应的原生js实现方案菜鸟教程下载

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

html中map area 热区自适应的原生js实现方案菜鸟教程下载_自适应小白入门

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,请自行封装实现!

海计划公众号
(0)
上一篇 2020/04/05 01:45
下一篇 2020/04/05 01:45

您可能感兴趣的内容

  • 苹果xsmax组装手机,二手机和翻新机的区别小白入门_IT入门教程

    小编农村娃,没啥大文化,为了好理解,全程大白话!走你~大部分人买手机情愿掏高价选择正规的手机专卖店,或者商场直营店。有很少部分人会去选择二手机,翻新机或者组装机。今天小编我就给大家分析一下二手机,翻新机,组装手机他们的区别。iphonexsmax二手机:按照字面意思理解,就是某一个人将自己使用的手机转卖给他人。购买这类手机的人相比翻新机会更多一点,因为是直接

    2020/04/03
  • 详解Js加法运算符小白基础_运算符入门百科

    简介JavaScript是一门了不起的语言。我喜欢它的灵活性:只需以你喜欢的方式做事:更改变量类型,动态的向对象添加方法或属性,对不同的变量类型使用运算符等等。然而动态是要付出代价的,开发人员需要知道怎样处理对于不同操作符的类型转换:加号(+),等号(==和===),不等号(!=和!==)等等,许多运算符有自己处理类型转换的方式。加法运算符最常用的运算符:+

    2020/03/23
  • textarea换行零基础入门在textarea中如何换行的实现总汇_输入框使用攻略

    html的textarea内容显示的时候怎么换行?输入的时候换了行,但是读取出来的时候是连在一起的,要怎么才可以显示换行?方式一:利用pre1、在textarea输出的div中添加如下css样式:.content {white-space: pre;
    }2、利用

    标签来输出textarea的内容:

    这是textarea中的内容....</pr

    2020/04/03
  • jquery-mockjax教程视频_模拟 Ajax 请求的jquery插件

    jquery-mockjax教程视频 官方网址:http://github.com/jakerella/jquery-mockjax/ GitHub:https://github….

    2020/03/06
  • cssreference.io菜鸟教程_可视化CSS样式表手册

    cssreference.io菜鸟教程 官方网址:https://cssreference.io/ 简介描述:可视化CSS样式表手册 Cscssreference.io是一个免费的…

    2020/03/11
  • 百姓网使用攻略_​领先的分类信息网

    百姓网使用攻略 官方网址:http://baixing.com/ 简介描述:​领先的分类信息网 ​领先的分类信息网。您可以免费查找各种新鲜的二手物品交易、二手车买卖、房屋租售、宠物…

    2020/03/06
  • css伪类和伪元素使用攻略_伪类小白攻略

    伪类和伪元素伪类和伪元素,对于绝大多数同学来说,都是耳熟能详的名字,但确实又有很多人搞不清楚它们之间的区别,以致于混淆概念。而当概念都混淆的时候,也往往意味着你不会经常使用它,怕出错,怕用不好。而这也会大大影响你的效率,本来几行代码就可以完成的工作,却要写上一大堆……所以,花点时间理清楚每一个看似微小的概念,会让我们的编程更有效率。下面进入正题。​

    2020/03/23
  • Vue的双向数据绑定原理小白攻略_原理小白攻略

    Vue的双向数据绑定原理小白攻略 1、属性类型 Object属性分为两个类型:数据属性、访问器属性,每类属性又有其不同的特显,双向绑定的原理是根据其访问器属性的特性来实现的。 1….

    2020/03/20
  • photopea使用帮助_在线Photoshop图片编辑工具

    photopea使用帮助 官方网址:https://www.photopea.com/ 简介描述:在线Photoshop图片编辑工具 Photopea 是一款基于WEB的在线Pho…

    2020/03/06
  • 10 种最流行的 Web 挖掘工具!入门百科_工具入门基础知识

    互联网有数不清的网页,且不断在以指数级速度产生新内容。到 2022 年,整个互联网创建和复制的数据将达到 44 ZB,也就是 44 万亿 GB。这么大体量内容的背后也带来了丰富信息源,唯一的问题是怎么在这浩如烟海的信息中检索到你想要的信息并带来价值。直接解决方案就是使用 Web 挖掘工具 。Web 挖掘是应用数据挖掘技术,从 Web 数据中提取知识。这个 w

    2020/03/30
  • 和程序员约会的十个理由小白知识_约会小白基础

    爱是空气,每个人都庆祝这种伴侣在身边的感觉。但是正如我们所说,程序员除外,程序员参加开发者大会把自己脑袋装的满满的,而不过多思考自己的单身生活。当他所有朋友疯狂地计划他们的情人节约会时,程序员或许会去研究程序而不让自己想起这件事。如果你是个女生,正在读这篇文章,你或许会想–程序员?你是指呆子?为什么会有人想和他们约会呢?那么,我给你十个理由:1、这种刻板印

    2020/03/22
  • 从.env文件中为Node.js加载环境变量入门攻略_变量基础知识

    使用环境变量是配置 Node.js 程序的好方法。而且许多包或模块可以基于不同的 NODE_ENV 变量的值表现出不同的行为。存储环境变量的一种方法是将它们放在 .env 文件中。这些文件允许你指定各种环境变量及其相应的值。在大多数情况下,你不希望将 .env 文件添加到源代码控制中(即Git)。因此,应该将它的文件名添加到 .gitignore 文件中,以

    2020/03/29
  • Cookie、Session与Token小白知识_存储小白攻略

    CookieCookie是一个http请求首部,当服务端响应头上标记着setCookie时,可以设置此cookie到当前域名下。浏览器端会将此cookie以kv的形式存储到本地文件中Sessionsession实际上是一种概念,表示每次会话服务器存储的用户信息实现:常见的手段是使用cookie来实现session。以java为例,客户端首次请求服务端后(例如

    2020/03/30
  • MutationObserver是什么?使用攻略_用法指南攻略

    MutationObserver概览MutationObserver interface可以用来监测DOM树的变化。MutationObserver 是旧的DOM3事件规范Mutation Events特性的一个替换。在DOM事件触发的时候,会触发MutationObserver中传入的callback。DOM监听是不会立刻开始的,必须调用observer(

    2020/03/20
  • pjax使用说明_对ajax + pushState的封装,让你可以很方便的使用pushState技术

    pjax使用说明 GitHub:https://github.com/welefen/pjax 简介描述:对ajax + pushState的封装,让你可以很方便的使用pushSt…

    2020/03/08
  • Flutter 与 iOS 原生 WebView 对比入门基础_Flutter使用帮助

    原文作者:享物说原文地址: https://juejin.im/post/5c778d86e51d4506304ee348本文对比的是 UIWebView、WKWebView、flutter_webview_plugin(在 iOS 中使用的是 WKWebView)的加载速度,内存使用情况。测试手机:iPhoneX系统:iOS12.0加载速度对比测试网页打开

    2020/03/29