window.onresize = adjuest;
function adjuest(){
var picw = $(".imgbox img").width();
var pich = $(".imgbox img").height(); var x1 = parseInt(picw*0.82004); //
var y1 = parseInt(pich*0.36380); //
var x2 = parseInt(picw*0.71700);
var y2 = parseInt(pich*0.41714);
var andx1 = parseInt(picw*0.67004);
var andy1 = parseInt(pich*0.36380);
var andx2 = parseInt(picw*0.56700);
var andy2 = parseInt(pich*0.41714);
$("#ios").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"')
$("#android").attr("coords",'"'+andx1+','+andy1+','+andx2+','+andy2+'"')
}
adjuest();

 // 0.82004 = area的x点位置/img的width
其他的类似

<div class="imgbox img_box_4" img-index="4" style="display:none">
<img src="__PUBLIC__/home/bsk/img/app_07.jpeg" alt="" usemap="#mymap">
<map name="mymap" >
<area id="ios" shape="rect" href="" coords="">
<area id ="android" shape="rect" href="" coords="">
</map>
</div>

动态计算area位置的更多相关文章

  1. html--offsetLeft,Left,clientLeft的关键--动态获取计算元素位置关系

    动态计算元素位置关系的时候,必备... http://www.cnblogs.com/panjun-Donet/articles/1294033.html

  2. 动态计算UITableViewCell高度

    动态计算UITableViewCell高度 UILabel in UITableViewCell Auto Layout - UILabel的属性Lines设为了0表示显示多行.Auto Layout ...

  3. 动态计算Label高度

    //1.设置该label的numberOfLines为0 self.titleLabel.numberOfLines = 0;    //2.字体的设置要与之前相同 NSDictionary * at ...

  4. iOS 动态计算文本内容的高度

    关于ios 下动态计算文本内容的高度,经过查阅和网上搜素,现在看到的有以下几种方法: 1. //  获取字符串的大小  ios6 - (CGSize)getStringRect_:(NSString* ...

  5. 还能输入多少字?(JS动态计算)

    <div class="m-form ovh"> <div class="hd"> <span class="fr&qu ...

  6. iOS学习之根据文本内容动态计算文本框高度的步骤

    在视图加载的过程中,是先计算出frame,再根据frame加载视图的,所以在设计计算高度的方法的时候,设计成加号方法; //首先给外界提供计算cell高度的方法 + (CGFloat)heightFo ...

  7. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  8. iOS中动态计算不同颜色、字体的文字高度

    在改项目bug的时候,有一个问题动态计算label的高度,前开发者竟然用字符串长度除以14.16这样的常量来计算是否换行,结果cell的高度问题非常严重. 因为label内容里有部分关键字是要另一种颜 ...

  9. css清浮动与动态计算元素宽度

    css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...

随机推荐

  1. Xshell多版本被曝存在后门,了解紧急响应修复预案

    近日,Xshell远程终端工具被爆出多个版本存在后门,无疑是安全圈的一个大新闻.恶意攻击者利用该后门可以收集到用户名密码等主机敏感信息,并将之传回攻击者的机器,导致服务器信息泄露,进一步可致使整个服务 ...

  2. SpringBoot入门之事件监听

    spring boot在启动过程中增加事件监听机制,为用户功能拓展提供极大的便利,sptingboot支持的事件类型有以下五种: ApplicationStartingEvent Applicatio ...

  3. 大数据技术之_19_Spark学习_01_Spark 基础解析小结(无图片)

    1.准备安装包 2.Spark Standalone 即独立模式  2.1.解压安装包到你安装的目录.  2.2.拷贝 conf 目录下的 slaves 文件,将 slave 节点的 hostname ...

  4. WEB-INFO 目录

    WEB-INF下面的内容都是只能由服务器级别才能访问,客户端并不能访问. 转发就是服务器级别,浏览器的地址不会变,因为,客户端发送一个请求,服务器受理之后,发现要请求内容还要再去别的请求,那么转发就是 ...

  5. HTML5技术要点

    HTML5技术要点 1.HTML5视频 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg ...

  6. python相见恨晚的库

    1)基本工具: virtualenv(虚拟环境)pip.setuptools (e.g. easy_install,这些东西肯定要呢)ipython(用了以后,就不再想用普通的python shell ...

  7. node 利用http和cheerio编写简易爬虫

    首先cnpm init创建一个package.json 引入cheerio模块 cnpm install --save cheerio 然后开始编写代码 let cheerio = require(' ...

  8. rabbitmq使用日记

    一.安装 添加安装源 #echo 'deb http://www.rabbitmq.com/debian/ testing main' | sudo tee /etc/apt/sources.list ...

  9. [转]C# 理解lock

    原文:http://www.cnblogs.com/apsnet/archive/2012/07/08/2581475.html 一. 为什么要lock,lock了什么? 当我们使用线程的时候,效率最 ...

  10. CentOS命令行界面与图形界面切换(图文详解)

    不多说,直接上干货! Ctrl + Alt +F1,到图形界面 Ctrl + Alt +F2,到命令行界面 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同 ...