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. [转载]Android中WebView自适应屏幕

    webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的 ...

  2. BrnShop：自定义插件

    BrnShop开源网上商城第四讲:自定义插件 重要通知:BrnShop企业版NOSQL设计(基于Redis)已经开源!源码内置于最新版的BrnShop中,感兴趣的园友可以去下载来看看.官网地址:www ...

  3. cygwin的安装使用

    Cygwin 是一个用于 Windows 的类 UNIX shell 环境. 它由两个组件组成:一个 UNIX API 库,它模拟 UNIX 操作系统提供的许多特性:以及 Bash shell 的改写 ...

  4. MVC 控制器

    ASP.NET MVC控制器(一) 前言 在路由的篇章中讲解了路由的作用,讲着讲着就到了控制器部分了,从本篇开始来讲解MVC中的控制器,控制器是怎么来的?MVC框架对它做了什么?以及前面有的篇幅所留的 ...

  5. TeamCity vs Jenkins: Which is the Better Continuous Integration (CI) Server for .NET Software Development?

    原文:http://www.excella.com/insights/teamcity-vs-jenkins-better-continuous-integration-server So, you’ ...

  6. Linq无聊练习系列4--join练习

    /**************join 练习*******************/            //对于1对多关系            var list =from c in ctx.T ...

  7. SZU:A26 Anagram

    Judge Info Memory Limit: 32768KB Case Time Limit: 10000MS Time Limit: 10000MS Judger: Normal Descrip ...

  8. winform动态的文字效果

    效果图如下

  9. SVN 服务端 和 客户端

    网址大全  |  EF CodeFirst  |  电视  |  MyNPOI  |  开源  |  我的皮肤  |  ASP.NET MVC4  |  前端提升  |  LINQ  |  WCF   ...

  10. [转]Mac OS X local privilege escalation (IOBluetoothFamily)

    Source: http://joystick.artificialstudios.org/2014/10/mac-os-x-local-privilege-escalation.html Nowad ...