专栏首页华创信息技术热点图 页面缩放不改变位置

热点图 页面缩放不改变位置

文章时间:2019年5月29日 23:42:02 解决问题:热点图 随着页面的缩放比例而不改变其所在的位置 推荐画图工具:Adobe Dreamweaver CC

jQuery下载地址:http://cdn.hcses.com/jquery/jquery.js CSS下载地址:http://cdn.hcses.com/common/mobile-style.css

头部我们需要3个东西,请直接复制即可

  <!--移动端缩放-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--引入jquery-->
  <script src="js/jquery.js"></script>
  <link rel="stylesheet" type="text/css" href="css/mobile-style.css">

直接复制这段代码然后用设计模式画图就行了。

<span class="wrap"><img src="images/xxxx.jpg" usemap="#Map" border="0">

任意地方加这段js代码。

<script>
        $("img[usemap]").each(function () {
            var img = $(this);
            var newImg = new Image();

            newImg.onload = function () {
                $("map[name=" + img.attr("usemap").replace(/#/, "") + "] area").each(function () {
                    var val = $(this).attr("coords").split(",");
                    for (var i in val) {
                        val[i] = parseInt(parseInt(val[i]) * img.width() / newImg.width);
                        newImg.width;
                    }
                    $(this).attr("coords", val.join(","));
                })
            };
            newImg.src = img.attr("src");
        });
    </script>

全部完整版代码如下:(可直接复制使用)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--移动端缩放-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--引入jquery-->
  <script src="js/jquery.js"></script>
  <title>页面标题</title>
  <link rel="stylesheet" type="text/css" href="css/mobile-style.css">
</head>
<body>
    <span class="wrap"><img src="images/xxxx.jpg" usemap="#Map" border="0">
    <map name="Map">
      <area shape="rect" coords="6,4,62,87" href="index.html">
    </map>
</span>
<script>
        $("img[usemap]").each(function () {
            var img = $(this);
            var newImg = new Image();

            newImg.onload = function () {
                $("map[name=" + img.attr("usemap").replace(/#/, "") + "] area").each(function () {
                    var val = $(this).attr("coords").split(",");
                    for (var i in val) {
                        val[i] = parseInt(parseInt(val[i]) * img.width() / newImg.width);
                        newImg.width;
                    }
                    $(this).attr("coords", val.join(","));
                })
            };
            newImg.src = img.attr("src");
        });
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 织梦栏目无法删除的解决方法

    华创信息技术
  • 织梦验证码图像无法显示解决方案

    解决方法: 用ob_clean()清除缓冲区。include/vdimgck.php约158行加:

    华创信息技术
  • 织梦广告管理功能增加图片上传

    华创信息技术
  • 记录一次疏忽造成的『折腾』受难记!

    月初明月更新了主题 Begin 到最新版,每次更新主题都要有一番小小的『折腾』,主要原因就是一些必要的代码都会因为主题更新而被覆盖掉,这也是为啥明月很不喜欢「魔...

    明月云服务
  • 【学习】R语言的高质量图形渲染库Cairo

    R语言作为统计学一门语言,一直在小众领域闪耀着光芒。直到大数据的爆发,R语言变成了一门炙手可热的数据分析的利器。随着越来越多的工程背景的人的加入,R语言的社区在...

    小莹莹
  • Python: simple drawi

    用户2398817
  • Veeam backup job(3)

    用户2398817
  • AI博弈论:DeepMind让智能体在非对称博弈中找纳什均衡

    Root 编译自 DeepMind官方博客 ? 随着人工智能系统在现实世界中扮演越来越重要的角色,理解不同的系统如何相互作用至关重要。 刚刚,DeepMind...

    量子位
  • 经验 | 如何成为一名顶级战斗力的数据分析师?

    翻译 | AI科技大本营(rgznai100) 参与 | reason_W 不知道大家以前听没听说过“10x Developer”这个词,如果你连听都还没听说过...

    AI科技大本营
  • 【基础】这15种CSS居中的方式,你都用过哪几种?

    CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有...

    毛瑞

扫码关注云+社区

领取腾讯云代金券