动态计算area位置
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位置的更多相关文章
- html--offsetLeft,Left,clientLeft的关键--动态获取计算元素位置关系
动态计算元素位置关系的时候,必备... http://www.cnblogs.com/panjun-Donet/articles/1294033.html
- 动态计算UITableViewCell高度
动态计算UITableViewCell高度 UILabel in UITableViewCell Auto Layout - UILabel的属性Lines设为了0表示显示多行.Auto Layout ...
- 动态计算Label高度
//1.设置该label的numberOfLines为0 self.titleLabel.numberOfLines = 0; //2.字体的设置要与之前相同 NSDictionary * at ...
- iOS 动态计算文本内容的高度
关于ios 下动态计算文本内容的高度,经过查阅和网上搜素,现在看到的有以下几种方法: 1. // 获取字符串的大小 ios6 - (CGSize)getStringRect_:(NSString* ...
- 还能输入多少字?(JS动态计算)
<div class="m-form ovh"> <div class="hd"> <span class="fr&qu ...
- iOS学习之根据文本内容动态计算文本框高度的步骤
在视图加载的过程中,是先计算出frame,再根据frame加载视图的,所以在设计计算高度的方法的时候,设计成加号方法; //首先给外界提供计算cell高度的方法 + (CGFloat)heightFo ...
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
- iOS中动态计算不同颜色、字体的文字高度
在改项目bug的时候,有一个问题动态计算label的高度,前开发者竟然用字符串长度除以14.16这样的常量来计算是否换行,结果cell的高度问题非常严重. 因为label内容里有部分关键字是要另一种颜 ...
- css清浮动与动态计算元素宽度
css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...
随机推荐
- Xshell多版本被曝存在后门,了解紧急响应修复预案
近日,Xshell远程终端工具被爆出多个版本存在后门,无疑是安全圈的一个大新闻.恶意攻击者利用该后门可以收集到用户名密码等主机敏感信息,并将之传回攻击者的机器,导致服务器信息泄露,进一步可致使整个服务 ...
- SpringBoot入门之事件监听
spring boot在启动过程中增加事件监听机制,为用户功能拓展提供极大的便利,sptingboot支持的事件类型有以下五种: ApplicationStartingEvent Applicatio ...
- 大数据技术之_19_Spark学习_01_Spark 基础解析小结(无图片)
1.准备安装包 2.Spark Standalone 即独立模式 2.1.解压安装包到你安装的目录. 2.2.拷贝 conf 目录下的 slaves 文件,将 slave 节点的 hostname ...
- WEB-INFO 目录
WEB-INF下面的内容都是只能由服务器级别才能访问,客户端并不能访问. 转发就是服务器级别,浏览器的地址不会变,因为,客户端发送一个请求,服务器受理之后,发现要请求内容还要再去别的请求,那么转发就是 ...
- HTML5技术要点
HTML5技术要点 1.HTML5视频 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg ...
- python相见恨晚的库
1)基本工具: virtualenv(虚拟环境)pip.setuptools (e.g. easy_install,这些东西肯定要呢)ipython(用了以后,就不再想用普通的python shell ...
- node 利用http和cheerio编写简易爬虫
首先cnpm init创建一个package.json 引入cheerio模块 cnpm install --save cheerio 然后开始编写代码 let cheerio = require(' ...
- rabbitmq使用日记
一.安装 添加安装源 #echo 'deb http://www.rabbitmq.com/debian/ testing main' | sudo tee /etc/apt/sources.list ...
- [转]C# 理解lock
原文:http://www.cnblogs.com/apsnet/archive/2012/07/08/2581475.html 一. 为什么要lock,lock了什么? 当我们使用线程的时候,效率最 ...
- CentOS命令行界面与图形界面切换(图文详解)
不多说,直接上干货! Ctrl + Alt +F1,到图形界面 Ctrl + Alt +F2,到命令行界面 欢迎大家,加入我的微信公众号:大数据躺过的坑 人工智能躺过的坑 同 ...