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

华创信息技术

发布于 2019-11-08 15:52:52

1.9K0

发布于 2019-11-08 15:52:52

文章被收录于专栏：华创信息技术

文章时间：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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/05/29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

http