window.onresize = adjuest;
function adjuest(){
var picw = $(".imgbox img").width();
var pich = $(".imgbox img").height();
var x1 = parseInt(picw*0.28755);
var y1 = parseInt(pich*0.511167);
var x2 = parseInt(picw*0.39931);
var y2 = parseInt(pich*0.5783333); var andx1 = parseInt(picw*0.28755);
var andy1 = parseInt(pich*0.62);
var andx2 = parseInt(picw*0.39931);
var andy2 = parseInt(pich*0.671667);
$("#ios").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"')
$("#android").attr("coords",'"'+andx1+','+andy1+','+andx2+','+andy2+'"')
}
adjuest(); 事先算出热区的位置如
  <area shape="rect" coords="338,308,609,589" href="/" class="box" target="_blank" >
  比例参数 = 338/图片在当前电脑的真实宽度 再用window.onresize监听图片,这样在图片大小变化的时候,热区依然在相应的位置

动态设置热区coords的坐标的更多相关文章

  1. JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)

    代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面.         //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...

  2. android ImageView网络图片加载、动态设置尺寸、圆角..

    封装了一个关于ImageView的辅助类,该类可以方便实现网络图片下载的同时,动态设置图片尺寸.圆角.....一系列连贯的操作,无样式表,java代码实现所有功能,使用很方便. package com ...

  3. 根据屏幕大小动态设置字体rem

    1.根据屏幕大小动态设置字体rem var docEl = document.documentElement, //当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时, //注意现在当浏 ...

  4. 动态设置和访问cxgrid列的Properties(转)

    原文:http://www.cnblogs.com/hnxxcxg/archive/2010/05/24/2940711.html 动态设置和访问cxgrid列的Properties 设置: cxGr ...

  5. SSRS动态设置文本框属性

    SSRS可以通过表达式动态设置文本框所有的属性,比如字体,字号,是否加粗,如下图所示: 汉字和数字英文字母占用的空间不一样,一个汉字占用两个数字和英文字母的空间,VB里有LENB取得字节数,这SSRS ...

  6. 【Android疑难杂症】GridView动态设置Item的宽高导致第一个Item不响应或显示不正常的问题

    前言 这个问题在之前做一个盒子项目时遇到过,最近又遇到了,使用GridView遇到的非常奇葩的问题,这里记录分享一下. 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnb ...

  7. 如果动态设置json对象的key

    项目中要求动态设置json的key属性,如果按照一般的json设置方法是不行的.假如你把一个key设置为一个变量的话,那么最后js解析出来的就是key为这个变量名而不是这个变量的值. 解决:通过使用 ...

  8. Android 通过Java代码生成创建界面。动态生成View,动态设置View属性。addRules详解

    废话不多说,本文将会层层深入给大家讲解如何动态的生成一个完整的界面. 本文内容: Java代码中动态生成View Java代码中动态设置View的位置,以及其他的属性 LayoutParams详解 一 ...

  9. easyui表单多重验证,动态设置easyui控件

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最 ...

随机推荐

  1. Squid代理服务器(三)——ACL访问控制

    一.ACL概念 Squid提供了强大的代理控制机制,通过合理设置ACL(Access Control List,访问控制列表)并进行限制,可以针对源地址.目标地址.访问的URL路径.访问的时间等各种条 ...

  2. Binaries和Source、tgz和zip的区别

    在下载页面会有2种下载分类,一个是Binaries,一个是source,一般开放原代码软件都会有两个版本发布: Source Distribution 和 Binary Distribution ,二 ...

  3. Hibernate入门教程

    Hibernate 随心所欲的使用面向对象思想操纵数据库. Table of contents 介绍 搭建开发环境 半sql半面向对象写法 完全的sql写法 完全的面向对象写法 Hibernate H ...

  4. Python3之文本操作

    文件操作示例分析: 文件操作一般要经历三个步骤: 打开文件 操作文件 关闭文件 读取操作示例: >>>f = open('test.txt', 'r') # 打开文件test.txt ...

  5. 缩点 CF893C Rumor

    CF893C Rumor 有n个人,其中有m对朋友,现在你有一个秘密你想告诉所有人,第i个人愿意出价a[i]买你的秘密,获得秘密的人会免费告诉它的所有朋友(他朋友的朋友也会免费知道),现在他们想出最少 ...

  6. fetch网络请求 get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise* Promise 是异步编程的一种解决方案* Promise 对 ...

  7. python高级——目录

    目  录 python高级(一)—— python数据模型(特殊方法) python高级(二)—— python内置序列类型 python高级(三)—— 字典和集合(泛映射类型) python高级(四 ...

  8. find命令用法集锦

    find命令用法: 01--过滤日志find -name "catelina.*.out"|xargs -f |grep '关键字' 02 -忽略一个目录或者多个目录find ./ ...

  9. Hangfire项目

    什么是Hangfire Hangfire 是一个开源的.NET任务调度框架,目前1.6+版本已支持.NET Core.个人认为它最大特点在于内置提供集成化的控制台,方便后台查看及监控: 另外,Hang ...

  10. html5在手机熄屏后倒计时会出现延迟情况

    今天开发了一个手机端的倒计时,然后同事说出现了Bug,怎么回事呢?Bug很简单,就是在手机返回主界面或者熄屏后倒计时会暂停在熄屏前的时间(注意时间是页面加载时获取的服务器的时间),问题很简单,知道问题 ...