最近做MOBILE的HTML5开发,人体图和页面一样,需要自适应不同的手机屏幕,蛋疼的是coords里面的标记是固定的,图片自适应后,锚点的标记就会产生空白区域,看了下
https://github.com/stowball/jQuery-rwdImageMaps rwd这个JQ的插件可以搞定,郁闷的是JQ太庞大了,太损耗性能了,先标记下,然后用JO或者JMOBI来重构。
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});

锚点自适应 map area coords的更多相关文章

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

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

  2. 如何为图片添加热点链接?(map + area)

    所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能跳转到相应的页面,而无需点击整个图片才能跳转. 说到图片热点链接,我首先想到了map + area, ...

  3. 谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

    说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象.也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素. 常见的有:<br>,< ...

  4. HTML图片热区map area的用法

    <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: < ...

  5. [转]如何为图片添加热点链接?(map + area)

    原文地址:https://www.cnblogs.com/jf-67/p/8135004.html 所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能 ...

  6. HTML图片热区 map area 标签

    实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...

  7. map+area标签

    map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签 area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域 例:要实现一幅地图上鼠标点击或者 ...

  8. Can't find kernel text map area from kcore

    kernel : 4.9.51kexec-tools : 2.0.4 1.~ # ./kexec -p /boot/vmlinuz --initrd=/boot/initrd --command-li ...

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

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

随机推荐

  1. apache日志

    <VirtualHost *:80> ServerAdmin chinasir.xyz@gmail.com DocumentRoot /var/www/html/baidu ServerN ...

  2. JavaEE权限管理系统的搭建(二)--------聚合工程项目的创建和依赖关系

    本项目是一个聚合工程,所以要先搭建一个聚合工程的框架 搭建完成的项目结构图如下: 首先创建父项目:pom类型 子模块:web层的搭建,war类型 把这个两个目录标记为对应的类型 其他子模块:和serv ...

  3. AngularJS 控制器其他实例

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. AngularJS 重复HTML元素

    data-ng-repeat指令会重复一个HTML元素 <!DOCTYPE html><html><head><meta http-equiv="C ...

  5. C# do while语句

    一.C# do while语句 do while语句是先执行一次循环体,然后再判断是否需要重复执行循环体的循环控制语句. 语法格式如下: do{    embedded-statement}while ...

  6. react(二):组件的通信

    对于组件来说,通信无非两种,父子组件通信,和非父子组件通信 一.父子父子组件通信 1.父组件给子组件传值 对于父组件来说,props是他们之间的媒介 class Parent extends Comp ...

  7. django模板层之静态文件引入优化

    1.新手使用 我们一般在初学django的情况下,引入django的静态文件一般有如下两种方式: 通过路径引用: <script type="text/javascript" ...

  8. 微信小程序开发:禁止输入表情的控制,验证方法,光标控制

    <input class="weui-input" name="receiptMan" maxlength="10" bindinpu ...

  9. 泉五培训Day4

    T1 收果子 题目 [题目描述] 有一个果园,有n棵果树依次排成一排,其中已知第 i 棵果树上结了ai个果子.现在要按照果树编号顺序依次收果子,对于一个能装v个果树的果篮,收果子从第1棵果树开始,如果 ...

  10. 在网页标题上加个logo

    只需在title标签上加个link标签即可 <link rel="icon" href="images/icon.png" > <title& ...