图片热区自适应和设置热区边框

最新推荐文章于 2023-10-12 17:31:01 发布
我现在没空，忙着优秀
最新推荐文章于 2023-10-12 17:31:01 发布
阅读量825
点赞数
文章标签：网页热区自适应布局触屏事件滑动处理地图标签
本文链接：https://blog.csdn.net/weixin_51562049/article/details/115097326
版权
  <!DOCTYPE html>
  <html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style data-merge-styles="true"></style>
    <title>
      图片热区自适应 和热区边框
    </title>
    <meta name="viewport"
      content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

    <style type="text/css">
     
      img {
        width: 100%;
        height: 100vh;
      }
    </style>


    <script type="text/javascript" language="javascript" src="./jquery-1.9.1.min.js"></script>

    <script type="text/javascript">
      //报纸图片加载完毕
      function loadcomplete() {
      }
    </script>
    <div style="position:relative;">
          <img id="KnMap" src="0001.jpg" border="0" usemap="#map01" onload="loadcomplete()">
  


      <div id="group" style="white-space: nowrap;">




      </div>

      <div id="div_line_collection"></div>
      <map name="map01" id="CribMap1">
        <area shape="rect" coords="42,324,1003,757" href="./101.html" />
        <area shape="rect" coords="42,846,1005,1440" href="./102.html" />
      </map>

     
    </div>







    <script type="text/javascript">
      adjust(1);
  
      var timeout = null; //onresize触发次数过多，设置定时器
      window.onresize = function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
          window.location.reload();
        }, 100); //页面大小变化，重新加载页面以刷新MAP
      }

      //获取MAP中元素属性
      function adjust(id) {
        var map = document.getElementById("CribMap" + id);
        var element = map.childNodes;
        var itemNumber = element.length / 2;
        console.log(itemNumber)
        for (var i = 0; i < itemNumber - 1; i++) {
          var item = 2 * i + 1;
          console.log(item)
          var oldCoords = element[item].coords;
          var newcoords = adjustPosition(oldCoords);
          element[item].setAttribute("coords", newcoords);
        }
        var test = element;
      }

      //调整MAP中坐标
      function adjustPosition(position) {
        var pageWidth = document.body.clientWidth; //获取页面宽度
        var pageHeith = document.body.clientHeight; //获取页面高度

        var imageWidth = 1040; //图片的长宽
        var imageHeigth = 1470;

        var each = position.split(",");
        //获取每个坐标点
        for (var i = 0; i < each.length; i++) {
          each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString(); //x坐标
          i++;
          each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString(); //y坐标
        }
        //生成新的坐标点
        var newPosition = "";
        for (var i = 0; i < each.length; i++) {
          newPosition += each[i];
          if (i < each.length - 1) {
            newPosition += ",";
          }
        }
        return newPosition;
      }
    </script>


    <SCRIPT LANGUAGE="JavaScript">
      loadcomplete();
      //全局变量，触摸开始位置  
      var startX = 0,
        startY = 0,
        tempX = 0,
        tempY = 0;
      //  var canscroll = 0;
      //  var canSheetChange = true;
      //  var pswidth = '1006.299988';
      // var psheight = '1574.880005';
      // var allSheet = ["./assets/0001.jpg","./assets/0002.jpg","./assets/0003.jpg","./assets/0004.jpg"];
      //  var sheetData = {};
      //  var imgwidth = $(window).width();
      //  var imgheight = $(window).width() * psheight / pswidth;
      //touchstart事件  
      function touchSatrtFunc(evt) {
        try {
          var touch = evt.touches[0]; //获取第一个触点  
          var x = Number(touch.pageX); //页面触点X坐标  
          var y = Number(touch.pageY); //页面触点Y坐标  
          //记录触点初始位置  
          tempX = startX = x;
          tempY = startY = y;
        } catch (e) {}
      }
      //绑定事件  
      function bindEvent() {
        document.addEventListener('touchstart', touchSatrtFunc, false);
        document.addEventListener('touchmove', touchMoveFunc, {
          passive: false
        });
        document.addEventListener('touchend', touchEndFunc, false);
      }
      //判断是否支持触摸事件  
      function isTouchDevice() {
        try {
          document.createEvent("TouchEvent");
          bindEvent(); //绑定事件  
        } catch (e) {}
      }

      window.onload = isTouchDevice;
      //touchmove事件，这个事件无法获取坐标  
      function touchMoveFunc(evt) {
        try {

          var touch = evt.touches[0]; //获取第一个触点  
          var x = Number(touch.pageX); //页面触点X坐标  
          var y = Number(touch.pageY); //页面触点Y坐标  
          //判断滑动方向  
          var dx = Math.abs(x - startX);
          var dy = Math.abs(y - startY);
          if (dx > dy) {

            evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
            if (x - startX > 20 || x - startX < -20) {
              //  $("#group").css("left", (parseFloat($("#group").css("left")) + parseFloat(x) - parseFloat(tempX)) + "px");
              tempX = x;

            }
          } else {

          }
        } catch (e) {
          console.log(e);
        }

      }

      function touchEndFunc(evt) {

        try {
          $("#div_line_collection").html(""); //清空红框
          //版面移动归位
          console.log(Math.abs(tempX - startX));
          console.log(tempX - startX);
          if (tempX - startX < 0) {
            swiper.slideNext();
            return false
          }
          if (Math.abs(tempX - startX) >= 20) {
            swiper.slidePrev();
          } else if (Math.abs(tempX - startX) < 20) {

            if (evt.target.tagName.toLowerCase() == "area") {

              MakeDIV(evt.target);
              showCon($(evt.target).attr("href"));
            }
          } else {
            //   $("#group").animate({ "left": -1 * imgwidth }, 200);
            //触发文章红框

          }

        } catch (e) {}




      }

      function showCon(href) {
        location.href = href;
      }
      //文章红色框生成函数
      function MakeDIV(obj) {

        $("#div_line_collection").html(""); //清空旧的红框

        var strs = new Array(); //定义一数组
        strs = $(obj).attr("coords").split(",");

        var i1, i2;
        var div_item = "";
        var o1 = -1,
          o2 = -1;
        var range;
        var i_top = 0;
        var i_left = 0;

        var w = strs[2] - strs[0],
          h = strs[3] - strs[1],
          top = strs[1],
          left = strs[0];
        div_item = "<div class='div_line' style='    border: 1px solid #f0432c;position: absolute;width:" + w +
          "px;height:" + h +
          "px;top:" + top + "px;left:" + left + "px'></div>";
        $("#div_line_collection").append(div_item);
      }
      //多少个版面的显示和隐藏
      function pageOn() {
        if ($("#div_pagecon").is(":hidden")) {
          $("#div_pagecon").show().animate({
            left: "0px"
          }, 500);
        } else {
          var temp_w = $(window).width() * 0.25;
          $("#div_pagecon").animate({
            left: "-" + temp_w + "px"
          }, 500, function () {
            $("#div_pagecon").hide()
          });
        }
      }

      function __doPostBack(eventTarget, eventArgument) {


      }

      function accAdd(arg1, arg2) {
        var r1, r2, m;
        try {
          r1 = arg1.toString().split(".")[1].length
        } catch (e) {
          r1 = 0
        }
        try {
          r2 = arg2.toString().split(".")[1].length
        } catch (e) {
          r2 = 0
        }
        m = Math.pow(10, Math.max(r1, r2))
        return (arg1 * m + arg2 * m) / m
      }
    </SCRIPT>