Map常识

请自己看吧:http://www.w3school.com.cn/tags/tag_map.asp

Map自适应

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            html,body{padding: 0; margin: 0;}

        </style>

    </head>

    <body>

        <img src="img/img.jpg" border="0" usemap="#planetmap" alt="Planets"  width="100%"/>

        <map name="planetmap" id="planetmap">

            <area shape="rect" coords="130,40,136,60"   id="eye"  href ="#" alt="eye" />

        </map>

        <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>

        <script>

            $("#eye").click(function(){

                alert("眼睛");

            })

            //重新定位map位置

            function rsz(){

                //正常情况下为386尺寸:计算比例

                var bl=$("body").innerWidth()/386;

                var x1=bl*130;

                var y1=bl*40;

                var x2=bl*136;

                var y2=bl*60;

                //重新计算位置

                $("#eye").attr({"coords":x1+","+y1+","+x2+","+y2})

            }

            //窗口宽度改变时执行

            $(window).resize(function() {

                rsz();

            });

            //页面初始化时候执行

            $(function(){

                rsz();

            })

        </script>

    </body>

</html>

html的map自适应的更多相关文章

  1. Saliency Detection via Graph-Based Manifold Ranking

    Saliency Detection via Graph-Based Manifold Ranking https://www.yuque.com/lart/papers 本文不是按照之前的论文那样, ...

  2. A Bayesian Approach to Deep Neural Network Adaptation with Applications to Robust Automatic Speech Recognition

    基于贝叶斯的深度神经网络自适应及其在鲁棒自动语音识别中的应用     直接贝叶斯DNN自适应 使用高斯先验对DNN进行MAP自适应 为何贝叶斯在模型自适应中很有用? 因为自适应问题可以视为后验估计问题 ...

  3. vue echarts map的使用，页面多图动态自适应

    最近在vue中使用echarts时,遇到了一些坑,在此记录一下. 1:echarts map的使用 2:页面多图自适应,只有一个图生效 3:根据设备的dpr,动态的修改了meta标签中的initial ...

  4. java Excel导入、自适应版本、将Excel转成List<map>对象

    转载:http://blog.csdn.net/u012662357/article/details/58593020 最近在web开发中遇到excel批量导入,在网上搜了下很少有将excel直接转成 ...

  5. map元素area热区坐标自适应窗口大小

    业务需求:点击图片热区跳转到不同的链接地址,同时要自适应窗口尺寸的变化. 问题:热区坐标点不会随着窗口调整变化 解决思路:获取初始的坐标点与图片宽高的比例,然后用比例乘以调整后的窗口宽高,就获得了新的 ...

  6. html中map area 热区自适应的原生js实现方案

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

  7. html5在手机端关于 map area中的自适应

    https://github.com/stowball/jQuery-rwdImageMaps用这一个插件可自适应!!!

  8. 锚点自适应 map area coords

    最近做MOBILE的HTML5开发,人体图和页面一样,需要自适应不同的手机屏幕,蛋疼的是coords里面的标记是固定的,图片自适应后,锚点的标记就会产生空白区域,看了下https://github.c ...

  9. R(四): R开发实例-map分布图

    前几章对R语言的运行原理.基本语法.数据类型.环境部署等基础知识作了简单介绍,本节将结合具体案例进行验证测试. 案例场景:从互联网下载全国三甲医院数据,以地图作为背景,展现各医院在地图上的分布图.全国 ...

随机推荐

  1. javascript 学习总结（四）Date对象

    1.Date.now() //Date.now() is in ECMAScript 5 //Prior to that, use +new Date() //获取当前时间 var now = (ty ...

  2. AjaxPro实现无刷新更新数据

    使用AjaxPro实现无刷新更新数据 需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(J ...

  3. Visual Studio 当前不会命中断点的问题

    这个问题一般有两个版本 1.当前不会命中断点,还没有为该文档加载任何符号. 2.当前不会命中断点,源代码与原始版本不同. 要解决第一个问题,就要了解一种文件格式“PDB(Program DataBas ...

  4. NServiceBus 概况

    NServiceBus 概况 NServiceBus 概况 NServiceBus 被设计用来组合面向业务的服务,它并不是用来替代诸如 WCF 一类的RPC技术. NServiceBus 不只包含通信 ...

  5. HttpTest4Net

    HttpTest4Net HttpTest4Net是一款基于C#实现的和HTTP压力测试工具,通过工具可以简单地对HTTP服务进行一个压力测试.虽然VS.NET也集成了压力测试项目,但由于VS自身占用 ...

  6. 网络tcp/ip资料

    1. Linux TCP/IP 协议栈分析,这是chinaunix.net论坛里的N人写的电子书,可以在这里下载PDF版本.http://blog.chinaunix.net/u2/85263/sho ...

  7. VS2012配色方案

    VS2012配色方案 这些天由于公司项目比较忙,所以天天盯着电脑8小时,而且我的开发工具VS2012是白色背景的所以每天下班都搞的眼睛巨疼. 今天在网上找到一个很好的配色方案,所以有同样烦恼的童鞋们可 ...

  8. NHIBERNATE的简单框架的设计

    NHIBERNATE的简单框架的设计 上次的 NHibernate的Session管理策略和NHibernateHelper 发布并提供下载,给NHibernate刚入门的同学们带来很多便利. 最近有 ...

  9. Socket的粘包处理

    Socket的粘包处理 当socket接收到数据后,会根据buffer的大小一点一点的接收数据,比如: 对方发来了1M的数据量过来,但是,本地的buffer只有1024字节,那就代表socket需要重 ...

  10. ACM 位运算

    的幂 boolean power2(int x) { return((x&(x-1))==0)&&(x!=0): } For example: #include<stdi ...