HTML坐标不随着屏幕大小改变,HTML热区map坐标,随窗口大小自适应办法(javascript)...

为图片添加MAP:

YardCribGraphic.aspx

/>

/>

/>

/>

图片大小随页面变化,需要MAP中每个area的坐标也随页面等比例变化。

Javascript实现:

adjust();

var timeout = null;//onresize触发次数过多,设置定时器

window.onresize = function () {

clearTimeout(timeout);

timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化,重新加载页面以刷新MAP

}

//获取MAP中元素属性

function adjust() {

var map = document.getElementById("CribMap");

var element = map.childNodes;

var itemNumber = element.length / 2;

for (var i = 0; i < itemNumber - 1; i++) {

var item = 2 * i + 1;

var oldCoords = element[item].coords;

var newcoords = adjustPosition(oldCoords);

element[item].setAttribute("coords", newcoords);

}

var test = element;

}

//调整MAP中坐标

function adjustPosition(position) {

var pageWidth = document.body.clientWidth;//获取页面宽度

var pageHeith = document.body.clientHeight;//获取页面高度

var imageWidth = 1160; //图片的长宽

var imageHeigth = 990;

var each = position.split(",");

//获取每个坐标点

for (var i = 0; i < each.length; i++) {

each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();//x坐标

i++;

each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString();//y坐标

}

//生成新的坐标点

var newPosition = "";

for (var i = 0; i < each.length; i++) {

newPosition += each[i];

if (i < each.length - 1) {

newPosition += ",";

}

}

return newPosition;

}

---------------------

作者:CoolBadger

来源:CSDN

原文:https://blog.csdn.net/crystalwood/article/details/13533401

版权声明:本文为博主原创文章,转载请附上博文链接!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/303144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET 2.0防止同一用户同时登陆

from:http://www.cnblogs.com/ly5201314/archive/2008/09/04/1284149.html 要防止同一用户同时登陆,首页应该记录在线用户的信息(这里与用户名为例),然后判断正在登陆的用户里面是否已存在。在这里使用一个cache存放已经登陆的用户名&#xff0c;但是还有一个问题就是要知道用户…

NET问答: Find() 和 Where().FirstOrDefault() 该如何选择 ?

咨询区 KingOfHypocrites&#xff1a;我经常看到别人用 Where.FirstOrDefault() 获取某一个匹配集合的第一个元素&#xff0c;我在想为什么他们不使用 Find() 呢 ? 是不是前者更高级一点&#xff1f;有人能告诉我它们的差别吗&#xff1f;比如下面的代码&#xff1a;namespace…

python实战,教你用微信每天给女朋友说晚安

但凡一件事&#xff0c;稍微有些重复&#xff0c;我就考虑怎么样用程序来实现它。这里给各位程序员朋友分享如何每天给朋友定时微信发送”晚安“&#xff0c;故事&#xff0c;新闻等等。最好运行在服务器上&#xff0c;这样后台挂起来更方便。准备&#xff1a;**微信号** pip i…

error LNK2001: unresolved external symbol public: __thiscall CNaDialog::CNaDialog(class CWnd *)

这种情况的报错原因是: 新建了类, 没有在FileView里添加相关的类文件, 包括头文件(h)和源代码文件(cpp). 把类的这两个文件分别添加上去就可以了. 转载于:https://www.cnblogs.com/xiaocai0923/archive/2011/11/13/2247530.html

学计算机与学英语作文,初二英语作文(关于计算机与学习)

鲁铁华回答&#xff1a;Thereisabiginfluenceoftechniqueonourdailylife.Electronicdevices,multimediaandcomputersarethingswehavetodealwitheveryday.EspeciallytheInternetisbecomingmoreandmoreimportantfornearlyeverybodyasitisoneofthenewestandmostforward-lookingmed…

一文说通C#的属性Attribute

属性Attributes这个东西&#xff0c;用好了可以省N多代码。一、属性属性Attributes在C#中很常用&#xff0c;但事实上很多人对这个东西又很陌生。从概念上讲&#xff0c;属性提供的是将元数据关系到元素的一种方式。属性使用的样子&#xff0c;应该都见过&#xff1a;[Flags] /…

10号发工资和20号发工资的公司,区别竟然这么大?

工资的话题一直占据着职场热度榜单这不最近又热起来了10号发工资和20号发工资&#xff0c;就能看出一个公司是否靠谱?对很多工薪族来说发工资这一天是脱贫致富的重要日子也是很多人的还款日子而这几年&#xff0c;一直有种说法发薪日是公司生态的一个缩影可以由此看出一个公司…

Exchange2003-2010迁移系列之九,创建DAG组

创建DAG两台Mailbox服务器部署完成后&#xff0c;我们接下来要在Mailbox服务器上配置DAG了。配置DAG的目的是为了增强邮件服务器的高可用&#xff0c;避免一台Mailbox服务器损坏之后&#xff0c;邮件系统用户无法访问邮箱。但在部署DAG之前&#xff0c;我们要了解下列几点&…

微型计算机原理计算两数和,微型计算机原理及汇编语言 第2章-2 补码及加减运算.ppt...

微型计算机原理及汇编语言 第2章-2 补码及加减运算2.4 数的定点与浮点表示法 2.4.1 定点表示 所谓定点表示法&#xff0c;是指小数点在数中的位置是固定的。原理上讲&#xff0c;小数点的位置固定在哪一位都是可以的&#xff0c;但通常将数据表示成纯小数或纯整数形式&#xff…

2011 美术

以下内容为互联网获得&#xff0c;本人不对答案负责&#xff01;如果文章引用对您造成伤害&#xff0c;请联系我&#xff0c;将其删除&#xff01;1、文艺复兴三杰达芬奇、米开朗基罗、拉斐尔2、古埃及绘画以附着于墓室墙体的壁画 代表&#xff0c;与浮雕具有相同的艺术特征&am…

趣图:脸部识别最快的实现

脸部识别/追踪最快的实现&#xff0c;没有之一↓↓↓网友评论&#xff1a;二零醚&#xff1a;硬件实现的效率总是最高的胡斌dev&#xff1a;使用这个程序是不是还配送一个框框&#xff1f;fan__y&#xff1a;牛逼&#xff0c;连转过去都能识别到Shao_Meng&#xff1a;而且 CPU …

Polly-故障处理和弹性应对很有一手

前言对于运行中的系统&#xff0c;可以说百分百的小伙伴会经常遇见以下问题&#xff1a;网络不通&#xff0c;突然又好了&#xff1b;服务器宕机了&#xff1b;调用服务接口超时了&#xff1b;调用接口报错啦&#xff1b;通讯信息发送失败需要重发&#xff1b;以上只是列举了一…

电脑桌面不显示此电脑或是计算机,电脑怎么显示出此电脑?此电脑显示的设置方法...

电脑怎么显示出此电脑?安装win10之后&#xff0c;打开时发现桌面上没有我的电脑图标&#xff0c;这对于很多人来说非常不适应&#xff0c;那么win10我的电脑图标没了怎么办?我们怎么才能让我的电脑显示在桌面呢?针对这个问题&#xff0c;下面U大侠小编就给大家介绍此电脑显示…

用Python分析了20万场吃鸡数据,有不少有趣的发现

首先&#xff0c;神枪镇楼&#xff1a;背景最近老板爱上了吃鸡&#xff08;手游&#xff1a;全军出击&#xff09;&#xff0c;经常拉着我们开黑&#xff0c;只能放弃午休的时间&#xff0c;陪老板在沙漠里奔波。 上周在在微信游戏频道看战绩的时候突发奇想&#xff0c;是不是可…

万字长文,带你彻底理解EF Core5的运行机制,让你成为团队中的EF Core专家

在EF Core 5中&#xff0c;有很多方式可以窥察工作流程中发生的事情&#xff0c;并与该信息进行交互。这些功能点包括日志记录&#xff0c;拦截&#xff0c;事件处理程序和一些超酷的最新出现的调试功能。EF团队甚至从Entity Framework的第一个版本中恢复了一些有用的旧的功能。…

重学数据结构004——栈的基本操作及实现(数组实现)

上文提到过栈以及栈的基本操作。上文中是基于链表做的实现。但是这种方法会出现大量的malloc()和free()操作&#xff0c;这种开销是非常昂贵的。 另外一种实现方式是基于数组的实现。这种实现方式需要预先制定一个栈的大小&#xff0c;此外还需要一个Top来记录栈顶元素下一个位…

使有用计算机不注意卫生,保护眼睛注意细节有哪些

长期面对电脑&#xff0c;很多白领都出现了视力下降、眼睛干涩等眼疾&#xff0c;上班族?下面就让小编来告诉你答案。上班族保护眼睛注意细节细节一&#xff1a;看电脑时眼睛度数应浅一些在电脑屏幕前工作时间长了&#xff0c;眼睛容易出现流泪、异物感、视物不清甚至视力下降…

C#使用线程窗口调试多线程程序

调试多线程程序一般有以下几种办法1、在日志的某个地方写日志文件。优点&#xff1a;不会干扰程序的执行&#xff0c;特别是对网络的多线程通信。缺点&#xff1a;每次都需要打开日志文件以查看进程运行的信息。2、利用断点进行调试。优点&#xff1a;直观&#xff0c;可以直接…

窥探渣男天才爱因斯坦的一生

本文授权转自微信公众号超级数学建模&#xff08;ID&#xff1a;supermodeling&#xff09;----------------------------------提起爱因斯坦&#xff0c;你最先想到什么&#xff1f;相对论&#xff1f;原子弹&#xff1f;物理天才&#xff1f;Emc?然而&#xff0c;2017年由美…

scvn 操作

新创建的目录&#xff0c;不在版本控制中的直接propset svn:ignore就行 创建了一个文件夹&#xff0c;并且把它加入版本控制&#xff0c;但忽略文件夹中的所有文件的内容&#xff1a;$ svn mkdir xxx$ svn propset svn:ignore * -R xxx //*表示改目录下所有文件&#xff0c;但…