javascript - 带有拖动放大镜的 HTML5 页面，但在移动设备上不起作用-6ren

javascript - 带有拖动放大镜的 HTML5 页面，但在移动设备上不起作用

转载作者：行者123 更新时间：2023-11-28 16:48:19

它在桌面浏览器中运行良好，但如果我在 iPad/Android/任何移动设备上使用，则它不会拖动。我已经在使用 jQuery touch punch。

var currentSlide = 8;
var onMouseDown = function(event) {
  var elements = (allElementsFromPoint(event.pageX, event.pageY));
  for (var i = 0; i < elements.length; i++) {
    if ($(elements[i]).hasClass("slide-canvas-layer")) {
      if (tool == "pencil" || tool == "brush") {
        canvas.addEventListener('mousemove', onPaint, false);
      }
    }
  }
};
var onMouseUp = function(event) {
  var elements = (allElementsFromPoint(event.pageX, event.pageY));
  for (var i = 0; i < elements.length; i++) {
    if ($(elements[i]).hasClass("slide-canvas-layer")) {
      canvas.removeEventListener('mousemove', onPaint, false);
    }
  }
};
var onTouchStart = function(event) {
  var elements = (allElementsFromPoint(event.touches[0].pageX, event.touches[0].pageY));
  for (var i = 0; i < elements.length; i++) {
    if ($(elements[i]).hasClass("slide-canvas-layer")) {
      if (tool == "pencil" || tool == "brush") {
        canvas.addEventListener('touchmove', onPaint, false);
      }
    }
  }
};
var onTouchEnd = function(event) {
  var elements = (allElementsFromPoint(event.changedTouches[0].pageX, event.changedTouches[0].pageY));
  for (var i = 0; i < elements.length; i++) {
    if ($(elements[i]).hasClass("slide-canvas-layer")) {
      canvas.removeEventListener('mousemove', onPaint, false);
      canvas.removeEventListener('touchmove', onPaint, false);
    }
  }
};
window.onload = function() {
  $(".menu-left-tool-box-button").bind('click', function(e) {
    tool = $(this).val();
    setTool(this);
  });
  $(".coversheet").draggable({
    containment: "parent",
    scroll: false
  });
  $(".coversheet").find(".coversheet-plus-minus-button").bind('click', function(e) {
    switch ($(this).val()) {
      case "+":
        $(this).parent().parent().css({
          width: ($(this).parent().parent().width() + 50) + "px",
          height: ($(this).parent().parent().height() + 50) + "px"
        });
        break;
      case "-":
        if ($(this).parent().parent().width() > 100) {
          $(this).parent().parent().css({
            width: ($(this).parent().parent().width() - 50) + "px",
            height: ($(this).parent().parent().height() - 50) + "px"
          });
        }
        break;
    }
  });

  $(".menu-left-tool-box-button-child-pencil").bind('click', function(e) {
    $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
    $(this).addClass("menu-left-tool-box-button-child-pencil-active");
    ctx.lineWidth = parseInt($(this).attr("value"));
    ctx.strokeStyle = "#000";
    ctx.globalAlpha = 1;

    octx.lineWidth = parseInt($(this).attr("value"));
    octx.strokeStyle = "#000";
    octx.globalAlpha = 1;
    tool = "pencil";
    setTool($(".menu-left-tool-box-button[value=pencil]"));
  });
  $(".menu-left-tool-box-button-child-brush").bind('click', function(e) {
    $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
    $(this).addClass("menu-left-tool-box-button-child-brush-active");
    $(".menu-left-tool-box-button[value=brush]").css({
      backgroundImage: 'url(./images/' + $(this).attr("color") + '_paint.png)'
    });
    ctx.strokeStyle = $(this).attr("value");
    ctx.globalAlpha = 1;
    ctx.lineWidth = 20;

    octx.strokeStyle = $(this).attr("value");
    octx.globalAlpha = 1;
    octx.lineWidth = 20;
    tool = "brush";
    setTool($(".menu-left-tool-box-button[value=brush]"));
  });
  $(".menu-right-button").bind('click', function(e) {
    switch ($(this).val()) {
      case "checkAnswer":
        var total = $(".cell-clickable").length;
        var right = 0;
        $(".cell-clickable").each(function() {
          switch ($(this).attr("value")) {
            case "cell-clickable-dot1":
              if ($(this).hasClass("cell-clickable-dot1")) {
                right++;
                $(this).find(".cell-clickable-button").removeClass("true-image").removeClass("false-image").addClass("true-image").removeClass("hide");
              } else {
                if ($(this).hasClass("cell-clickable-dot2")) {
                  $(this).find(".cell-clickable-button").removeClass("true-image").removeClass("false-image").addClass("false-image").removeClass("hide");
                }
              }
              break;
            case "cell-clickable-dot2":
              if ($(this).hasClass("cell-clickable-dot2")) {
                right++;
                $(this).find(".cell-clickable-button").removeClass("true-image").removeClass("false-image").addClass("true-image").removeClass("hide");
              } else {
                if ($(this).hasClass("cell-clickable-dot1")) {
                  $(this).find(".cell-clickable-button").removeClass("true-image").removeClass("false-image").addClass("false-image").removeClass("hide");
                }
              }
              break;
          }
          if (total == right) {
            $(".cell-clickable-dot1").css({
              backgroundColor: "rgba(61, 203, 27,0.5)",
              boxShadow: "0px 0px 0px 5px rgb(61, 203, 27)"
            });
            $(".cell-clickable").find(".cell-clickable-button").addClass("hide");
          }
        });
    }
  });
  $(".menu-left-preview-box-preview").bind('click', function(e) {
    window.location = "page" + ($(this).index() + 1) + ".html";
  });


  var native_width = 0;
  var native_height = 0;
  var magnifyIsMouseDown = false;
  $(".magnify").parent().mousedown(function(e) {
    magnifyIsMouseDown = true;
  });
  $(".magnify").mousemove(function(e) {
    if (isDragging) {
      if (!native_width && !native_height) {
        var image_object = new Image();
        image_object.src = $(".small").attr("src");
        native_width = image_object.width;
        native_height = image_object.height;
      } else {
        var magnify_offset = $(this).offset();
        var mx = e.pageX - magnify_offset.left;
        var my = e.pageY - magnify_offset.top;

        if ($(".large").is(":visible")) {
          var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
          var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
          var bgp = rx + "px " + ry + "px";

          var px = mx - $(".large").width() / 2;
          var py = my - $(".large").height() / 2;
          $(".large").css({
            left: px,
            top: py,
            backgroundPosition: bgp
          });
        }
      }
    }
  });
  var isDragging = false;
  $(".magnify").parent().mouseup(function(e) {

    isDragging = false;
  });
  $(".magnify").parent().mousedown(function(e) {
    // $(".large").fadeOut(100);
    isDragging = true;
  });
  $(".large").fadeIn(100);

  manageSlide();
}

function allElementsFromPoint(x, y) {
  var element, elements = [];
  var old_visibility = [];
  while (true) {
    element = document.elementFromPoint(x, y);
    if (!element || element === document.documentElement) {
      break;
    }
    elements.push(element);
    old_visibility.push(element.style.visibility);
    element.style.visibility = 'hidden';
  }
  for (var k = 0; k < elements.length; k++) {
    elements[k].style.visibility = old_visibility[k];
  }
  elements.reverse();
  return elements;
}

function manageSlide() {
  $("#slide-number").text(currentSlide);
  $(".slide").addClass("hide");
  $(".slide").removeClass("hide");
  $(".menu-left-preview-box-preview").removeClass("menu-left-preview-box-preview-active");
  $(".menu-left-preview-box-preview").eq(currentSlide - 1).addClass("menu-left-preview-box-preview-active");
  $(".slide-canvas-layer").addClass("hide");
  $(".slide-canvas-layer-opacity").addClass("hide");
  tool = null;
  setTool();
  initCanvas();
}
var zoomScale = 1;

function setTool(sender) {
  $(".menu-left-tool-box-button").removeClass("tool-box-button-active");
  switch (tool) {
    case "pencil":
      $(".slide-canvas-layer").removeClass("hide");
      $(".slide-canvas-layer-opacity").removeClass("hide");
      $(sender).addClass("tool-box-button-active");
      var flag = false;
      $(".menu-left-tool-box-button-child-pencil").each(function() {
        if ($(this).hasClass("menu-left-tool-box-button-child-pencil-active")) {
          flag = true;
        }
      });
      if (!flag) {
        $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
        $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
        $(".menu-left-tool-box-button-child-pencil").eq(0).addClass("menu-left-tool-box-button-child-pencil-active");
        ctx.lineWidth = parseInt($(".menu-left-tool-box-button-child-pencil").eq(0).attr("value"));
        ctx.strokeStyle = "#000";
        ctx.globalAlpha = 1;

        octx.lineWidth = parseInt($(".menu-left-tool-box-button-child-pencil").eq(0).attr("value"));
        octx.strokeStyle = "#000";
        octx.globalAlpha = 1;
      }

      break;
    case "brush":
      $(".slide-canvas-layer").removeClass("hide");
      $(".slide-canvas-layer-opacity").removeClass("hide");
      $(sender).addClass("tool-box-button-active");
      var flag = false;
      $(".menu-left-tool-box-button-child-brush").each(function() {
        if ($(this).hasClass("menu-left-tool-box-button-child-brush-active")) {
          flag = true;
        }
      });
      if (!flag) {
        $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
        $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
        $(".menu-left-tool-box-button-child-brush").eq(0).addClass("menu-left-tool-box-button-child-brush-active");
        ctx.strokeStyle = $(".menu-left-tool-box-button-child-brush").eq(0).attr("value");
        ctx.globalAlpha = 1;
        ctx.lineWidth = 20;

        octx.strokeStyle = $(".menu-left-tool-box-button-child-brush").eq(0).attr("value");
        octx.globalAlpha = 1;
        octx.lineWidth = 20;
      }
      break;
    case "coversheet":
      if ($(".slide").find(".coversheet").hasClass("hide")) {
        $(".slide").find(".coversheet").removeClass("hide");
      } else {
        $(".slide").find(".coversheet").addClass("hide");
      }
      break;
    case "back":
      if (currentSlide > 1) {
        currentSlide--;
        window.location = "page" + currentSlide + ".html";
      }
      break;
    case "next":
      if (currentSlide < $(".menu-left-preview-box-preview").length) {
        currentSlide++;
        window.location = "page" + currentSlide + ".html";
      }
      break;
    case "restart":
      location.reload();
      break;
    case "zoom":
      zoomScale += 0.10;
      $("#slide-content").css({
        transform: "scale(" + zoomScale + ")",
        webkitTransform: "scale(" + zoomScale + ")",
        mozTransform: "scale(" + zoomScale + ")"
      });
      $(".slide-canvas-layer").addClass("hide");
      $(".slide-canvas-layer-opacity").addClass("hide");
      $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
      $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
      tool = null;
      break;
    case "reduse":
      if (zoomScale > .20) {
        zoomScale -= 0.10;
      }
      $("#slide-content").css({
        transform: "scale(" + zoomScale + ")",
        webkitTransform: "scale(" + zoomScale + ")",
        mozTransform: "scale(" + zoomScale + ")"
      });
      $(".slide-canvas-layer").addClass("hide");
      $(".slide-canvas-layer-opacity").addClass("hide");
      $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
      $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
      tool = null;
      break;
    default:
      $(".slide-canvas-layer").addClass("hide");
      $(".slide-canvas-layer-opacity").addClass("hide");
      $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
      $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
      tool = null;
      break;
  }
}
var prevTool = null;
var tool = null;
var cumulativeOffset = function(element) {
  var top = 0,
    left = 0;
  do {
    top += element.offsetTop || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while (element);

  return {
    top: top,
    left: left
  };
};
var canvas = null,
  ctx = null;
var ocanvas = null,
  octx = null;

var firstTimeDocumentEvent = false;
var mouse = {
  x: 0,
  y: 0
};
var last_mouse = {
  x: 0,
  y: 0
};

function initCanvas() {
  document.body.addEventListener('mousedown', onMouseDown, false);
  document.body.addEventListener('mouseup', onMouseUp, false);
  document.body.addEventListener('touchstart', onTouchStart, false);
  document.body.addEventListener('touchend', onTouchEnd, false);
  document.body.addEventListener('touchleave', onTouchEnd, false);
  document.body.addEventListener('touchcancel', onTouchEnd, false);
  canvas = document.querySelector('.slide-canvas-layer');
  ctx = canvas.getContext('2d');
  ocanvas = document.querySelector('.slide-canvas-layer-opacity');
  octx = ocanvas.getContext('2d');
  var sketch = document.querySelector('#slide-content');
  var sketch_style = getComputedStyle(sketch);
  canvas.width = parseInt(sketch_style.getPropertyValue('width')) - 15;
  canvas.height = parseInt(sketch_style.getPropertyValue('height'));
  ocanvas.width = parseInt(sketch_style.getPropertyValue('width')) - 15;
  ocanvas.height = parseInt(sketch_style.getPropertyValue('height'));
  $(canvas).css({
    marginTop: (-1 * parseInt(sketch_style.getPropertyValue('height'))) + "px"
  });
  $(ocanvas).css({
    marginTop: (-1 * parseInt(sketch_style.getPropertyValue('height'))) + "px"
  });

  canvas.addEventListener('mousemove', function(e) {
    e.preventDefault();
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    var offSet = cumulativeOffset(this);
    mouse.x = e.pageX - offSet.left;
    mouse.y = e.pageY - offSet.top;
  }, false);
  ocanvas.addEventListener('mousemove', function(e) {
    e.preventDefault();
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    var offSet = cumulativeOffset(this);
    mouse.x = e.pageX - offSet.left;
    mouse.y = e.pageY - offSet.top;
  }, false);
  canvas.addEventListener('touchmove', function(e) {
    e.preventDefault();
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    var offSet = cumulativeOffset(this);
    mouse.x = e.touches[0].pageX - offSet.left;
    mouse.y = e.touches[0].pageY - offSet.top;
  }, false);
  ocanvas.addEventListener('touchmove', function(e) {
    e.preventDefault();
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    var offSet = cumulativeOffset(this);
    mouse.x = e.touches[0].pageX - offSet.left;
    mouse.y = e.touches[0].pageY - offSet.top;
  }, false);
  ctx.lineWidth = 3;
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';

  octx.lineWidth = 3;
  octx.lineJoin = 'round';
  octx.lineCap = 'round';

}
var mouseDownOn = null;

var onPaint = function() {
  if (tool == "pencil") {
    ctx.beginPath();
    ctx.moveTo(last_mouse.x, last_mouse.y);
    ctx.lineTo(mouse.x, mouse.y);
    ctx.closePath();
    ctx.stroke();
  } else if (tool == "brush") {
    octx.beginPath();
    octx.moveTo(last_mouse.x, last_mouse.y);
    octx.lineTo(mouse.x, mouse.y);
    octx.closePath();
    octx.stroke();
  }
};

.hide {
  display: none!important;
}
body {
  font-family: Verdana;
}
body > * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#wrapper {
  width: 1000px;
  height: 550px;
  background-color: #cecbcb;
  margin: auto;
}
#menu-left {
  height: 100%;
  width: 100px;
  float: left;
}
#menu-left-tool-box {
  height: 60%;
  width: 100%;
  box-shadow: 0px 1px 0px 0px #b2b0b0;
  text-align: center;
}
.menu-left-tool-box-button {
  width: 35px;
  height: 35px;
  background-color: transparent;
  margin: 4px;
  padding: 0;
  outline: none;
  border-width: 1px;
  background-position: center;
  background-repeat: no-repeat;
}
.menu-left-tool-box-button:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  cursor: pointer;
}
.tool-box-button-active {
  background-color: rgba(30, 182, 18, 0.3);
}
.menu-left-tool-box-button-child-pencil {
  width: 10px;
  height: 10px;
  margin: 0.5px;
  padding: 0;
  border-width: 1px;
  background-size: contain;
  float: left;
}
.menu-left-tool-box-button-child-pencil-active {
  box-shadow: 0px 0px 0px 1px #000;
}
.menu-left-tool-box-button-child-brush {
  width: 10px;
  height: 10px;
  margin: 0.5px;
  padding: 0;
  border-width: 1px;
  background-size: contain;
  float: left;
}
.menu-left-tool-box-button-child-brush-active {
  box-shadow: 0px 0px 0px 1px #000;
}
#menu-left-preview-box {
  height: 40%;
  width: 100%;
  overflow-x: hidden;
  text-align: center;
  overflow-y: auto;
}
.menu-left-preview-box-preview {
  width: 38px;
  height: 31px;
  background-color: transparent;
  box-shadow: 0px 0px 1px 0px #b2b0b0;
  border: none;
  outline: none;
}
.menu-left-preview-box-preview-active {
  box-shadow: 0px 0px 1px 1px #13bb0c;
}
#content {
  height: 100%;
  width: 850px;
  background-color: #d4a1a5;
  box-shadow: -1px 0px 0px 0px #b2b0b0;
  overflow: auto;
  float: left;
}
.slide {
  height: 100%;
  width: 100%;
  background-color: #d4a1a5;
}
.slide-title {
  height: 35px;
  width: 820px;
  padding: 15px;
}
.slide-title-content {
  height: 35px;
  background-color: red;
  border-radius: 20px;
}
.slide-title-content-eye {
  height: 25px;
  width: 25px;
  border-radius: 100px;
  margin: 5px;
  border-width: 1px;
  outline: none;
  background-position: center;
  background-repeat: no-repeat;
  float: left;
}
.slide-title-content-text {
  height: 25px;
  margin: 5px;
  float: left;
  color: white;
}
.slide-content {
  height: 470px;
  width: 100%;
  overflow: auto;
}
.false-image {
  background-image: url('./images/false.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.true-image {
  background-image: url('./images/true.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.slide-canvas-layer {
  position: fixed;
  z-index: 999;
}
.slide-canvas-layer-opacity {
  position: fixed;
  z-index: 999;
  opacity: 0.5;
}
.coversheet {
  height: 100px;
  width: 100px;
  background-color: white;
  position: absolute;
  z-index: 1000;
}
.coversheet-plus-minus {
  background-color: #000;
  width: 71px;
  height: 50px;
  line-height: 50px;
  /*position: absolute;*/
  right: 0;
}
.coversheet-plus-minus-button {
  background-color: transparent;
  color: white;
  border: none;
  margin: 0;
  font-size: 18px;
  margin: 2px;
  padding: 7px;
}
#menu-right {
  height: 100%;
  width: 50px;
  box-shadow: -1px 0px 0px 0px #b2b0b0;
  float: right;
}
.menu-right-button {
  height: 30px;
  width: 30px;
  border-radius: 100px;
  margin: 10px;
  border-width: 1px;
  outline: none;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}
#menu-right-image {
  height: 160px;
  width: 100%;
  position: relative;
  top: 240px;
}
/**********OVERRIDE CSS*/

.ui-state-hover,
.ui-state-active {
  background-color: rgba(57, 187, 31, 0.5);
  border: none;
}
/***********/

#slide-content {
  height: 100%;
  width: 100%;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
}
.magnify {
  position: relative;
  background-color: #d4a1a5;
  height: 100%;
  margin: auto;
}
.large {
  width: 133px;
  height: 133px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  background: url('https://lh3.googleusercontent.com/t789bbPUzJzrVs6cDPZNtiDxX9NCEWggBIW1IDCbeJllWjMOXy5ILBBFCYu9UjKJLsmCyubMREZjTZnelGwMyup8nVLP-VeMUg8oF0mCXN7gkcOweuJYVYTuj3Cx4rhuoOy8jvM-v83vrmT0-bn1tJx2YdLraQ9p7X82jL8rz9iLSNUgVv36Lxs9rfKpBGTyM7_8rzBsZonWXmcMTgInDdhL5mWx-J97bPOyJ9XA1bltKNRposrL69pdQW1WOAUWKj-uTT5K5z6GjaLeT-vN7gJSCb0NFUauszdao_Z5GFSyKOHWWjChXY3Q5CKBtg7Ir-uXoi4UFArTlHNPvuXCnJQptWv-L0TtZ2RrKpMgjimPoBKsGFjUxzYcY95kfZjGlm5-7V5Uut_Nw58Rk0bCz1EWUrW8nzDfawdilyJkDMn3dIhqlzJ8NGGZ5-2hwJTUOIyfrIQat7273nAPCkid6553CiLF57RGptiCxonWn5CZbpU4O7E8nudVMLPiYNY-nuupA-GOhh8-v6heBza6ijkGIpyyTFLieNBO9IjFTw=s220-no') no-repeat;
  background-color: #d4a1a5;
  display: none;
  margin: auto;
}
/*To solve overlap bug at the edges during magnification*/

.small {
  display: block;
  width: 100%;
}
.large-image {
  background: url('https://photos-1.dropbox.com/t/2/AAAnwmx1QvCzmWFYW5i8a3u_gOPGCt19gs_lBJOqwCS93A/12/134709958/png/32x32/1/_/1/2/icon_magnify_glass.png/EK_Up2cYgQQgBygH/R1kBQnLrN-RrPOYcREvqvMMrOMI-rfEOs5ZVgV-3Ayo?size=1024x768&size_mode=2') no-repeat;
  height: 112%;
  width: 114%;
  position: absolute;
  top: 73%;
  left: 70%;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div class="slide-content">
  <div id="slide-content">
    <div class="magnify" style="width: 266px;">
      <div class="large" style="display: none; left: 195.615px; top: 79.0139px; background-position: -150px -54px;">
        <div class="large-image"></div>
      </div>
      <img class="small" src="https://lh3.googleusercontent.com/gzHg89Pc4MtSrIeH__viNCTdBDDemmYf5VDG7vnZzRiaqWBKOKEzHH0PtlpLu8vyA27dg0q7-pmxAggQEF3p5JsDCPWjbux1uQJGLDNTSLsB7MVJG_cBWDDZqkdcshbeCfXCC4UCQMe1ogugc1R8zduLOfeONFnbhGObEFmBzBF60E6ff8lN8BBoZSxPGW_p3LvTdC4k49ULEVZR9QlJDo_JuMUIM-kSBtrN6WEtQ0RRJPUnqIrwmWj3ec_37hdSSzdPHmYLaNPTbJ1wF3dY8wYn5sJG6tdxk7qp-gI-q7xcFEK2huR6YwJtKTpx5U6mn2tr8Vs00vuvHf1fzi-_40ZWA3XNKWh8syUbTs-WYob7Xb4mSKCr5P4QTfUtHFwHuREv45j24LRdSe5_8B_YWCnIB6wG5x4PbNUEn70OlYSvVgS_rYEkeVqMcY0hQCJuIivfkBacTYFrTF61obq1ixtYSmkyhp8CV3atCsHFm2JwKIlJBZ5fwwnZICfKDITDt1qYsb64TrhNL7Wg7BHSazQ6Tkr3exVtQZ6yp57PsQ=s220-no">
    </div>
  </div>
  <canvas class="slide-canvas-layer-opacity hide" width="835" height="470" style="margin-top: -470px;"></canvas>
  <canvas class="slide-canvas-layer hide" width="835" height="470" style="margin-top: -470px;"></canvas>
</div>

最佳答案

我更新了你的 Jsfiddle(新的 here )，你的代码在移动设备上运行时出现了一些问题。

1。 mousedown/mouseup/mousemove 与 touchstart/touchend/touchmove

将 mouseup 和 mousedown 函数更改为也由 touchstart 和 touchend 触发

旧的:

   $(".magnify").parent().mouseup(function(e) {
       isDragging = false;
   });
   $(".magnify").parent().mousedown(function(e) {
       isDragging = true;
   });

新:

   $(".magnify").parent().on("mouseup touchend",function(e) {
       isDragging = false;
   });
   $(".magnify").parent().on("mousedown touchstart",function(e) {         
       isDragging = true;
   });

与 mousemove 类似老的: $(".magnify").mousemove(函数(e) {

新: $(".magnify").on("mousemove touchmove",function(e) {

2。移动端未定义事件的 pageX 和 pageY

在你的代码中

var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;

在移动设备上是 NaN 因为 e.pageX 和 e.pageY 是未定义的，所以我将您的代码调整为 this answer 之后的触摸事件Is there an equivalent to e.PageX position for 'touchstart' event as there is for click event? :

if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        mx = touch.pageX - magnify_offset.left;
        my = touch.pageY - magnify_offset.top;
}

var currentSlide = 8;
var onMouseDown = function(event) {
  var elements = (allElementsFromPoint(event.pageX, event.pageY));
  for (var i = 0; i < elements.length; i++) {
    if ($(elements[i]).hasClass("slide-canvas-layer")) {
      if (tool == "pencil" || tool == "brush") {
        canvas.addEventListener('mousemove', onPaint, false);
      }
    }
  }
};
var onMouseUp = function(event) {
  var elements = (allElementsFromPoint(event.pageX, event.pageY));
  for (var i = 0; i < elements.length; i++) {
    if ($(elements[i]).hasClass("slide-canvas-layer")) {
      canvas.removeEventListener('mousemove', onPaint, false);
    }
  }
};
var onTouchStart = function(event) {
  var elements = (allElementsFromPoint(event.touches[0].pageX, event.touches[0].pageY));
  for (var i = 0; i < elements.length; i++) {
    if ($(elements[i]).hasClass("slide-canvas-layer")) {
      if (tool == "pencil" || tool == "brush") {
        canvas.addEventListener('touchmove', onPaint, false);
      }
    }
  }
};
var onTouchEnd = function(event) {
  var elements = (allElementsFromPoint(event.changedTouches[0].pageX, event.changedTouches[0].pageY));
  for (var i = 0; i < elements.length; i++) {
    if ($(elements[i]).hasClass("slide-canvas-layer")) {
      canvas.removeEventListener('mousemove', onPaint, false);
      canvas.removeEventListener('touchmove', onPaint, false);
    }
  }
};
window.onload = function() {
  $(".menu-left-tool-box-button").bind('click', function(e) {
    tool = $(this).val();
    setTool(this);
  });
  $(".coversheet").draggable({
    containment: "parent",
    scroll: false
  });
  $(".coversheet").find(".coversheet-plus-minus-button").bind('click', function(e) {
    switch ($(this).val()) {
      case "+":
        $(this).parent().parent().css({
          width: ($(this).parent().parent().width() + 50) + "px",
          height: ($(this).parent().parent().height() + 50) + "px"
        });
        break;
      case "-":
        if ($(this).parent().parent().width() > 100) {
          $(this).parent().parent().css({
            width: ($(this).parent().parent().width() - 50) + "px",
            height: ($(this).parent().parent().height() - 50) + "px"
          });
        }
        break;
    }
  });

  $(".menu-left-tool-box-button-child-pencil").bind('click', function(e) {
    $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
    $(this).addClass("menu-left-tool-box-button-child-pencil-active");
    ctx.lineWidth = parseInt($(this).attr("value"));
    ctx.strokeStyle = "#000";
    ctx.globalAlpha = 1;

    octx.lineWidth = parseInt($(this).attr("value"));
    octx.strokeStyle = "#000";
    octx.globalAlpha = 1;
    tool = "pencil";
    setTool($(".menu-left-tool-box-button[value=pencil]"));
  });
  $(".menu-left-tool-box-button-child-brush").bind('click', function(e) {
    $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
    $(this).addClass("menu-left-tool-box-button-child-brush-active");
    $(".menu-left-tool-box-button[value=brush]").css({
      backgroundImage: 'url(./images/' + $(this).attr("color") + '_paint.png)'
    });
    ctx.strokeStyle = $(this).attr("value");
    ctx.globalAlpha = 1;
    ctx.lineWidth = 20;

    octx.strokeStyle = $(this).attr("value");
    octx.globalAlpha = 1;
    octx.lineWidth = 20;
    tool = "brush";
    setTool($(".menu-left-tool-box-button[value=brush]"));
  });
  $(".menu-right-button").bind('click', function(e) {
    switch ($(this).val()) {
      case "checkAnswer":
        var total = $(".cell-clickable").length;
        var right = 0;
        $(".cell-clickable").each(function() {
          switch ($(this).attr("value")) {
            case "cell-clickable-dot1":
              if ($(this).hasClass("cell-clickable-dot1")) {
                right++;
                $(this).find(".cell-clickable-button").removeClass("true-image").removeClass("false-image").addClass("true-image").removeClass("hide");
              } else {
                if ($(this).hasClass("cell-clickable-dot2")) {
                  $(this).find(".cell-clickable-button").removeClass("true-image").removeClass("false-image").addClass("false-image").removeClass("hide");
                }
              }
              break;
            case "cell-clickable-dot2":
              if ($(this).hasClass("cell-clickable-dot2")) {
                right++;
                $(this).find(".cell-clickable-button").removeClass("true-image").removeClass("false-image").addClass("true-image").removeClass("hide");
              } else {
                if ($(this).hasClass("cell-clickable-dot1")) {
                  $(this).find(".cell-clickable-button").removeClass("true-image").removeClass("false-image").addClass("false-image").removeClass("hide");
                }
              }
              break;
          }
          if (total == right) {
            $(".cell-clickable-dot1").css({
              backgroundColor: "rgba(61, 203, 27,0.5)",
              boxShadow: "0px 0px 0px 5px rgb(61, 203, 27)"
            });
            $(".cell-clickable").find(".cell-clickable-button").addClass("hide");
          }
        });
    }
  });
  $(".menu-left-preview-box-preview").bind('click', function(e) {
    window.location = "page" + ($(this).index() + 1) + ".html";
  });


  var native_width = 0;
  var native_height = 0;
  var magnifyIsMouseDown = false;
  $(".magnify").parent().mousedown(function(e) {
    magnifyIsMouseDown = true;
  });
  $(".magnify").on("mousemove touchmove",function(e) {
    if (isDragging) {
      if (!native_width && !native_height) {
        var image_object = new Image();
        image_object.src = $(".small").attr("src");
        native_width = image_object.width;
        native_height = image_object.height;
      } else {
        var magnify_offset = $(this).offset();
        var mx = e.pageX - magnify_offset.left;
        var my = e.pageY - magnify_offset.top;
        if (e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel') {
          var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
          mx = touch.pageX - magnify_offset.left;
          my = touch.pageY - magnify_offset.top;
        }


        if ($(".large").is(":visible")) {
          var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
          var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
          var bgp = rx + "px " + ry + "px";

          var px = mx - $(".large").width() / 2;
          var py = my - $(".large").height() / 2;
          $(".large").css({
            left: px,
            top: py,
            backgroundPosition: bgp
          });
        }
      }
    }
  });
  var isDragging = false;
  $(".magnify").parent().on("mouseup touchend", function(e) {

    isDragging = false;
  });
  $(".magnify").parent().on("mousedown touchstart", function(e) {
    console.log("mousedown");
    // $(".large").fadeOut(100);
    isDragging = true;
  });
  $(".large").fadeIn(100);

  manageSlide();
}

function allElementsFromPoint(x, y) {
  var element, elements = [];
  var old_visibility = [];
  while (true) {
    element = document.elementFromPoint(x, y);
    if (!element || element === document.documentElement) {
      break;
    }
    elements.push(element);
    old_visibility.push(element.style.visibility);
    element.style.visibility = 'hidden';
  }
  for (var k = 0; k < elements.length; k++) {
    elements[k].style.visibility = old_visibility[k];
  }
  elements.reverse();
  return elements;
}

function manageSlide() {
  $("#slide-number").text(currentSlide);
  $(".slide").addClass("hide");
  $(".slide").removeClass("hide");
  $(".menu-left-preview-box-preview").removeClass("menu-left-preview-box-preview-active");
  $(".menu-left-preview-box-preview").eq(currentSlide - 1).addClass("menu-left-preview-box-preview-active");
  $(".slide-canvas-layer").addClass("hide");
  $(".slide-canvas-layer-opacity").addClass("hide");
  tool = null;
  setTool();
  initCanvas();
}
var zoomScale = 1;

function setTool(sender) {
  $(".menu-left-tool-box-button").removeClass("tool-box-button-active");
  switch (tool) {
    case "pencil":
      $(".slide-canvas-layer").removeClass("hide");
      $(".slide-canvas-layer-opacity").removeClass("hide");
      $(sender).addClass("tool-box-button-active");
      var flag = false;
      $(".menu-left-tool-box-button-child-pencil").each(function() {
        if ($(this).hasClass("menu-left-tool-box-button-child-pencil-active")) {
          flag = true;
        }
      });
      if (!flag) {
        $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
        $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
        $(".menu-left-tool-box-button-child-pencil").eq(0).addClass("menu-left-tool-box-button-child-pencil-active");
        ctx.lineWidth = parseInt($(".menu-left-tool-box-button-child-pencil").eq(0).attr("value"));
        ctx.strokeStyle = "#000";
        ctx.globalAlpha = 1;

        octx.lineWidth = parseInt($(".menu-left-tool-box-button-child-pencil").eq(0).attr("value"));
        octx.strokeStyle = "#000";
        octx.globalAlpha = 1;
      }

      break;
    case "brush":
      $(".slide-canvas-layer").removeClass("hide");
      $(".slide-canvas-layer-opacity").removeClass("hide");
      $(sender).addClass("tool-box-button-active");
      var flag = false;
      $(".menu-left-tool-box-button-child-brush").each(function() {
        if ($(this).hasClass("menu-left-tool-box-button-child-brush-active")) {
          flag = true;
        }
      });
      if (!flag) {
        $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
        $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
        $(".menu-left-tool-box-button-child-brush").eq(0).addClass("menu-left-tool-box-button-child-brush-active");
        ctx.strokeStyle = $(".menu-left-tool-box-button-child-brush").eq(0).attr("value");
        ctx.globalAlpha = 1;
        ctx.lineWidth = 20;

        octx.strokeStyle = $(".menu-left-tool-box-button-child-brush").eq(0).attr("value");
        octx.globalAlpha = 1;
        octx.lineWidth = 20;
      }
      break;
    case "coversheet":
      if ($(".slide").find(".coversheet").hasClass("hide")) {
        $(".slide").find(".coversheet").removeClass("hide");
      } else {
        $(".slide").find(".coversheet").addClass("hide");
      }
      break;
    case "back":
      if (currentSlide > 1) {
        currentSlide--;
        window.location = "page" + currentSlide + ".html";
      }
      break;
    case "next":
      if (currentSlide < $(".menu-left-preview-box-preview").length) {
        currentSlide++;
        window.location = "page" + currentSlide + ".html";
      }
      break;
    case "restart":
      location.reload();
      break;
    case "zoom":
      zoomScale += 0.10;
      $("#slide-content").css({
        transform: "scale(" + zoomScale + ")",
        webkitTransform: "scale(" + zoomScale + ")",
        mozTransform: "scale(" + zoomScale + ")"
      });
      $(".slide-canvas-layer").addClass("hide");
      $(".slide-canvas-layer-opacity").addClass("hide");
      $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
      $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
      tool = null;
      break;
    case "reduse":
      if (zoomScale > .20) {
        zoomScale -= 0.10;
      }
      $("#slide-content").css({
        transform: "scale(" + zoomScale + ")",
        webkitTransform: "scale(" + zoomScale + ")",
        mozTransform: "scale(" + zoomScale + ")"
      });
      $(".slide-canvas-layer").addClass("hide");
      $(".slide-canvas-layer-opacity").addClass("hide");
      $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
      $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
      tool = null;
      break;
    default:
      $(".slide-canvas-layer").addClass("hide");
      $(".slide-canvas-layer-opacity").addClass("hide");
      $(".menu-left-tool-box-button-child-pencil").removeClass("menu-left-tool-box-button-child-pencil-active");
      $(".menu-left-tool-box-button-child-brush").removeClass("menu-left-tool-box-button-child-brush-active");
      tool = null;
      break;
  }
}
var prevTool = null;
var tool = null;
var cumulativeOffset = function(element) {
  var top = 0,
    left = 0;
  do {
    top += element.offsetTop || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while (element);

  return {
    top: top,
    left: left
  };
};
var canvas = null,
  ctx = null;
var ocanvas = null,
  octx = null;

var firstTimeDocumentEvent = false;
var mouse = {
  x: 0,
  y: 0
};
var last_mouse = {
  x: 0,
  y: 0
};

function initCanvas() {
  document.body.addEventListener('mousedown', onMouseDown, false);
  document.body.addEventListener('mouseup', onMouseUp, false);
  document.body.addEventListener('touchstart', onTouchStart, false);
  document.body.addEventListener('touchend', onTouchEnd, false);
  document.body.addEventListener('touchleave', onTouchEnd, false);
  document.body.addEventListener('touchcancel', onTouchEnd, false);
  canvas = document.querySelector('.slide-canvas-layer');
  ctx = canvas.getContext('2d');
  ocanvas = document.querySelector('.slide-canvas-layer-opacity');
  octx = ocanvas.getContext('2d');
  var sketch = document.querySelector('#slide-content');
  var sketch_style = getComputedStyle(sketch);
  canvas.width = parseInt(sketch_style.getPropertyValue('width')) - 15;
  canvas.height = parseInt(sketch_style.getPropertyValue('height'));
  ocanvas.width = parseInt(sketch_style.getPropertyValue('width')) - 15;
  ocanvas.height = parseInt(sketch_style.getPropertyValue('height'));
  $(canvas).css({
    marginTop: (-1 * parseInt(sketch_style.getPropertyValue('height'))) + "px"
  });
  $(ocanvas).css({
    marginTop: (-1 * parseInt(sketch_style.getPropertyValue('height'))) + "px"
  });

  canvas.addEventListener('mousemove', function(e) {
    e.preventDefault();
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    var offSet = cumulativeOffset(this);
    mouse.x = e.pageX - offSet.left;
    mouse.y = e.pageY - offSet.top;
  }, false);
  ocanvas.addEventListener('mousemove', function(e) {
    e.preventDefault();
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    var offSet = cumulativeOffset(this);
    mouse.x = e.pageX - offSet.left;
    mouse.y = e.pageY - offSet.top;
  }, false);
  canvas.addEventListener('touchmove', function(e) {
    e.preventDefault();
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    var offSet = cumulativeOffset(this);
    mouse.x = e.touches[0].pageX - offSet.left;
    mouse.y = e.touches[0].pageY - offSet.top;
  }, false);
  ocanvas.addEventListener('touchmove', function(e) {
    e.preventDefault();
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    var offSet = cumulativeOffset(this);
    mouse.x = e.touches[0].pageX - offSet.left;
    mouse.y = e.touches[0].pageY - offSet.top;
  }, false);
  ctx.lineWidth = 3;
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';

  octx.lineWidth = 3;
  octx.lineJoin = 'round';
  octx.lineCap = 'round';

}
var mouseDownOn = null;

var onPaint = function() {
  if (tool == "pencil") {
    ctx.beginPath();
    ctx.moveTo(last_mouse.x, last_mouse.y);
    ctx.lineTo(mouse.x, mouse.y);
    ctx.closePath();
    ctx.stroke();
  } else if (tool == "brush") {
    octx.beginPath();
    octx.moveTo(last_mouse.x, last_mouse.y);
    octx.lineTo(mouse.x, mouse.y);
    octx.closePath();
    octx.stroke();
  }
};

.hide {
  display: none!important;
}
body {
  font-family: Verdana;
}
body > * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#wrapper {
  width: 1000px;
  height: 550px;
  background-color: #cecbcb;
  margin: auto;
}
#menu-left {
  height: 100%;
  width: 100px;
  float: left;
}
#menu-left-tool-box {
  height: 60%;
  width: 100%;
  box-shadow: 0px 1px 0px 0px #b2b0b0;
  text-align: center;
}
.menu-left-tool-box-button {
  width: 35px;
  height: 35px;
  background-color: transparent;
  margin: 4px;
  padding: 0;
  outline: none;
  border-width: 1px;
  background-position: center;
  background-repeat: no-repeat;
}
.menu-left-tool-box-button:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  cursor: pointer;
}
.tool-box-button-active {
  background-color: rgba(30, 182, 18, 0.3);
}
.menu-left-tool-box-button-child-pencil {
  width: 10px;
  height: 10px;
  margin: 0.5px;
  padding: 0;
  border-width: 1px;
  background-size: contain;
  float: left;
}
.menu-left-tool-box-button-child-pencil-active {
  box-shadow: 0px 0px 0px 1px #000;
}
.menu-left-tool-box-button-child-brush {
  width: 10px;
  height: 10px;
  margin: 0.5px;
  padding: 0;
  border-width: 1px;
  background-size: contain;
  float: left;
}
.menu-left-tool-box-button-child-brush-active {
  box-shadow: 0px 0px 0px 1px #000;
}
#menu-left-preview-box {
  height: 40%;
  width: 100%;
  overflow-x: hidden;
  text-align: center;
  overflow-y: auto;
}
.menu-left-preview-box-preview {
  width: 38px;
  height: 31px;
  background-color: transparent;
  box-shadow: 0px 0px 1px 0px #b2b0b0;
  border: none;
  outline: none;
}
.menu-left-preview-box-preview-active {
  box-shadow: 0px 0px 1px 1px #13bb0c;
}
#content {
  height: 100%;
  width: 850px;
  background-color: #d4a1a5;
  box-shadow: -1px 0px 0px 0px #b2b0b0;
  overflow: auto;
  float: left;
}
.slide {
  height: 100%;
  width: 100%;
  background-color: #d4a1a5;
}
.slide-title {
  height: 35px;
  width: 820px;
  padding: 15px;
}
.slide-title-content {
  height: 35px;
  background-color: red;
  border-radius: 20px;
}
.slide-title-content-eye {
  height: 25px;
  width: 25px;
  border-radius: 100px;
  margin: 5px;
  border-width: 1px;
  outline: none;
  background-position: center;
  background-repeat: no-repeat;
  float: left;
}
.slide-title-content-text {
  height: 25px;
  margin: 5px;
  float: left;
  color: white;
}
.slide-content {
  height: 470px;
  width: 100%;
  overflow: auto;
}
.false-image {
  background-image: url('./images/false.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.true-image {
  background-image: url('./images/true.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.slide-canvas-layer {
  position: fixed;
  z-index: 999;
}
.slide-canvas-layer-opacity {
  position: fixed;
  z-index: 999;
  opacity: 0.5;
}
.coversheet {
  height: 100px;
  width: 100px;
  background-color: white;
  position: absolute;
  z-index: 1000;
}
.coversheet-plus-minus {
  background-color: #000;
  width: 71px;
  height: 50px;
  line-height: 50px;
  /*position: absolute;*/
  right: 0;
}
.coversheet-plus-minus-button {
  background-color: transparent;
  color: white;
  border: none;
  margin: 0;
  font-size: 18px;
  margin: 2px;
  padding: 7px;
}
#menu-right {
  height: 100%;
  width: 50px;
  box-shadow: -1px 0px 0px 0px #b2b0b0;
  float: right;
}
.menu-right-button {
  height: 30px;
  width: 30px;
  border-radius: 100px;
  margin: 10px;
  border-width: 1px;
  outline: none;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}
#menu-right-image {
  height: 160px;
  width: 100%;
  position: relative;
  top: 240px;
}
/**********OVERRIDE CSS*/

.ui-state-hover,
.ui-state-active {
  background-color: rgba(57, 187, 31, 0.5);
  border: none;
}
/***********/

#slide-content {
  height: 100%;
  width: 100%;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
}
.magnify {
  position: relative;
  background-color: #d4a1a5;
  height: 100%;
  margin: auto;
}
.large {
  width: 133px;
  height: 133px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  background: url('https://lh3.googleusercontent.com/t789bbPUzJzrVs6cDPZNtiDxX9NCEWggBIW1IDCbeJllWjMOXy5ILBBFCYu9UjKJLsmCyubMREZjTZnelGwMyup8nVLP-VeMUg8oF0mCXN7gkcOweuJYVYTuj3Cx4rhuoOy8jvM-v83vrmT0-bn1tJx2YdLraQ9p7X82jL8rz9iLSNUgVv36Lxs9rfKpBGTyM7_8rzBsZonWXmcMTgInDdhL5mWx-J97bPOyJ9XA1bltKNRposrL69pdQW1WOAUWKj-uTT5K5z6GjaLeT-vN7gJSCb0NFUauszdao_Z5GFSyKOHWWjChXY3Q5CKBtg7Ir-uXoi4UFArTlHNPvuXCnJQptWv-L0TtZ2RrKpMgjimPoBKsGFjUxzYcY95kfZjGlm5-7V5Uut_Nw58Rk0bCz1EWUrW8nzDfawdilyJkDMn3dIhqlzJ8NGGZ5-2hwJTUOIyfrIQat7273nAPCkid6553CiLF57RGptiCxonWn5CZbpU4O7E8nudVMLPiYNY-nuupA-GOhh8-v6heBza6ijkGIpyyTFLieNBO9IjFTw=s220-no') no-repeat;
  background-color: #d4a1a5;
  display: none;
  margin: auto;
}
/*To solve overlap bug at the edges during magnification*/

.small {
  display: block;
  width: 100%;
}
.large-image {
  background: url('https://photos-1.dropbox.com/t/2/AAAnwmx1QvCzmWFYW5i8a3u_gOPGCt19gs_lBJOqwCS93A/12/134709958/png/32x32/1/_/1/2/icon_magnify_glass.png/EK_Up2cYgQQgBygH/R1kBQnLrN-RrPOYcREvqvMMrOMI-rfEOs5ZVgV-3Ayo?size=1024x768&size_mode=2') no-repeat;
  height: 112%;
  width: 114%;
  position: absolute;
  top: 73%;
  left: 70%;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div class="slide-content">
  <div id="slide-content">
    <div class="magnify" style="width: 266px;">
      <div class="large" style="display: none; left: 195.615px; top: 79.0139px; background-position: -150px -54px;">
        <div class="large-image"></div>
      </div>
      <img class="small" src="https://lh3.googleusercontent.com/gzHg89Pc4MtSrIeH__viNCTdBDDemmYf5VDG7vnZzRiaqWBKOKEzHH0PtlpLu8vyA27dg0q7-pmxAggQEF3p5JsDCPWjbux1uQJGLDNTSLsB7MVJG_cBWDDZqkdcshbeCfXCC4UCQMe1ogugc1R8zduLOfeONFnbhGObEFmBzBF60E6ff8lN8BBoZSxPGW_p3LvTdC4k49ULEVZR9QlJDo_JuMUIM-kSBtrN6WEtQ0RRJPUnqIrwmWj3ec_37hdSSzdPHmYLaNPTbJ1wF3dY8wYn5sJG6tdxk7qp-gI-q7xcFEK2huR6YwJtKTpx5U6mn2tr8Vs00vuvHf1fzi-_40ZWA3XNKWh8syUbTs-WYob7Xb4mSKCr5P4QTfUtHFwHuREv45j24LRdSe5_8B_YWCnIB6wG5x4PbNUEn70OlYSvVgS_rYEkeVqMcY0hQCJuIivfkBacTYFrTF61obq1ixtYSmkyhp8CV3atCsHFm2JwKIlJBZ5fwwnZICfKDITDt1qYsb64TrhNL7Wg7BHSazQ6Tkr3exVtQZ6yp57PsQ=s220-no">
    </div>
  </div>
  <canvas class="slide-canvas-layer-opacity hide" width="835" height="470" style="margin-top: -470px;"></canvas>
  <canvas class="slide-canvas-layer hide" width="835" height="470" style="margin-top: -470px;"></canvas>
</div>

关于javascript - 带有拖动放大镜的 HTML5 页面，但在移动设备上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32904057/

文章推荐： php - TCPDF 文本与图像重叠

文章推荐： css - 无法在 Wordpress 移动导航菜单上的搜索框中键入

文章推荐： Python Timer 使解释器崩溃

JavaScript 放大镜
我用 JavaScript 构建了一个放大镜，当我单击它或单击并拖动它时，它效果很好，但它不应该从屏幕上隐藏。 $(".menu-left-preview-box-preview").bind('cl
一组图形的 Javascript 放大镜 - 跨浏览器兼容性
我在网上搜索过放大镜，但通常它们只适用于一张照片。所以，我做了一个放大镜，可以放大特定 div 中的所有图片。它在 Chrome 浏览器上运行良好，但在 Firefox 和 Opera 浏览器上会产生
c# - 调用 Windows 放大镜
我正在 C#/WPF 应用程序中为 Kinect SDK 构建手势系统。我想添加放大镜放大和缩小的手势。我更愿意使用内置的 Windows 放大镜或其底层逻辑，但任何获得类似效果(多显示器感知)的方法
css - 放大镜(缩放) 光标在图像上
我正在寻找将鼠标悬停在 Fancybox 图像上时将光标更改为放大镜的解决方案。就像在 Pinterest 上一样，当您将鼠标悬停在图片上时(使用 chrome)。到目前为止我有这个没有跨浏览器支
javascript - html javascript css 放大镜
$(document).ready(function(){ var native_width = 0; var native_height = 0; //Now the mousemove funct
css - 如何在 ExtJS 字符串过滤器中的文本右侧显示搜索图标(放大镜)？
我还没有在文档中找到解决这个问题的方法，我想在开始解决这个问题之前先在这里问一下。最佳答案您想添加一个 trigger到您的文本字段。例如: {
c# - Windows 10 放大镜 API 鼠标点击坏了？
我使用 windows 放大镜 api 在 autohotkey 中创建了一个以鼠标为中心的放大镜。在 Windows 7 中完成，在新的 Windows 8、8.1 甚至 10 LTSB 上工作。但
ios - 防止在 UITextField 中编辑文本并在使用 inputView 时隐藏光标/插入符号/放大镜
如何防止在 UITextField 中编辑文本并隐藏光标/插入符号/放大镜，但仍然显示键盘，因为我正在使用 inputView 使用 UIPickerView/UIDatePickerView? 将
android - iPhone : is it possible to draw outside of a view? 中的 EditText 放大镜
我正在尝试制作 FastSelectEditText，以便: 可以通过长按和滑动手指来选择文本。滑动和选择时，显示放大镜(如 iphone)，以便用户可以看到手指下的文字。不幸的是，我的设计存在问

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城