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. 使用Flexible实现手淘H5页面的终端适配(转)

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  2. 个推A/B测试评测

    A/B测试在各类网站设计中已经是比较常见的,本文着重讲讲A/B测试在应用推送领域的作用. 目前国外开通A/B测试的推送服务商只有swrve,而国内的个推也在前不久发布的smart push 2.0中集 ...

  3. 数据结构二叉树的java实现，包括二叉树的创建、搜索、删除和遍历

    根据自己的学习体会并参考了一些网上的资料,以java写出了二叉树的创建.搜索.删除和遍历等操作,尚未实现的功能有:根据先序和中序遍历,得到后序遍历以及根据后序和中序遍历,得到先序遍历,以及获取栈的深度 ...

  4. sqlserver中数据的四种插入方式

    1.insert into stuInfo(name,stuId) values('李洁','19291727')insert into stuInfo(name,stuId) values('李康' ...

  5. 测试驱动 ASP.NET MVC Type Aliase

    Type Aliase 去掉Scala的糖衣(4) -- Type Aliase 我的新博客地址:http://cuipengfei.me/blog/2013/12/23/desugar-scala- ...

  6. ios中判断控制台Log输出控制，是否是iphone5，自动调整尺寸

    // 控制台Log输出控制,此确保在release版本下无Log输出 #ifdef DEBUG #define CMBLOG          NSLog #else #define CMBLOG  ...

  7. Day2：T3DP(基于排列组合思想)

    T3:DP(基于排列组合思想的状态转移) 其实之前写排列组合的题目有一种很茫然的感觉.... 应该是因为之前没有刷过所以没有什么体会 上次刷的vj1060有用到,但是写状态转移还是第一次学习吧 ccy ...

  8. 细节MARK

    在刷vijos1046的时候遇到了一些细节,MARK一下 1.哲学之前有告诫我说,输出long long的数的时候,最好用cout,不然容易出现编译器的问题,今天算是领教了 2.对于数组赋值问题 me ...

  9. 使用 Aspose.Cells 实现 excel导入

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  10. ios7上隐藏status bar

    在iOS7上 对于设置status bar 又有了点点的改变 1.对于 UIViewController 加入了动态改变 status bar style的方法 - (UIStatusBarStyle ...