Question

能否请您看一下这个演示，让我知道为什么我无法将Mag()添加到弹跳中

原始代码是mousemove事件上的working Here，但我想向放大镜添加自动移动弹跳，如

var vx = 3;
var vy = 2;

function hitLR(el, bounding) {
    if (el.offsetLeft <= 0 && vx < 0) {
        console.log('LEFT');
        vx = -1 * vx;
    }
    if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) {
        console.log('RIGHT');
        vx = -1 * vx;
    }
    if (el.offsetTop <= 0 && vy < 0) {
        console.log('TOP');
        vy = -1 * vy;
    }
    if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) {
        console.log('BOTTOM');
        vy = -1 * vy;
    }
}

function mover(el, bounding) {
    hitLR(el, bounding);
    el.style.left = el.offsetLeft + vx + 'px';
    el.style.top = el.offsetTop + vy + 'px';
    setTimeout(function() {
        mover(el, bounding);
    }, 50);
    Mag();
}

setTimeout(function() {
    mover($('.bouncer')[0], $('.bouncyHouse')[0]);

}, 50);

Answer 1

[这是工作中的小提琴。] [1]。

如下更新代码。

jQuery(document).ready(function($) {
  var vx = 3;
  var vy = 2;

  function hitLR(el, bounding) {
    if (el.offsetLeft <= 0 && vx < 0) {
      console.log('LEFT');
      vx = -1 * vx;
    }
    if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) {
      console.log('RIGHT');
      vx = -1 * vx;
    }
    if (el.offsetTop <= 0 && vy < 0) {
      console.log('TOP');
      vy = -1 * vy;
    }
    if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) {
      console.log('BOTTOM');
      vy = -1 * vy;
    }
  }

  function mover(el, bounding) {
    hitLR(el, bounding);
    //el.style.left = el.offsetLeft + vx + 'px';
    //el.style.top = el.offsetTop + vy + 'px';
    setTimeout(function() {
      mover(el, bounding);
    }, 50);
    Mag(el.offsetLeft + vx, el.offsetTop + vy);
    //Mag(vx, vy);
  }

  setTimeout(function() {
    mover($('.bouncer')[0], $('.bouncyHouse')[0]);

  }, 50);

  var native_width = 0;
  var native_height = 0;

  //Now the mousemove function
  function Mag(px, py) {
    //When the user hovers on the image, the script will first calculate
    //the native dimensions if they don't exist. Only after the native dimensions
    //are available, the script will show the zoomed version.
    if (!native_width && !native_height) {
      //This will create a new image object with the same image as that in .small
      //We cannot directly get the dimensions from .small because of the 
      //width specified to 200px in the html. To get the actual dimensions we have
      //created this image object.
      var image_object = new Image();
      image_object.src = $(".small").attr("src");

      //This code is wrapped in the .load function which is important.
      //width and height of the object would return 0 if accessed before 
      //the image gets loaded.
      native_width = image_object.width;
      native_height = image_object.height;
    } else
    {

      var mx = px + $(".large").width() / 2;
      var my = py + $(".large").height() / 2;

      //The background position of .large will be changed according to the position
      //of the mouse over the .small image. So we will get the ratio of the pixel
      //under the mouse pointer with respect to the image and use that to position the 
      //large image inside the magnifying glass
      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";

     
      //If you hover on the image now, you should see the magnifying glass in action
      $(".large").css({
        left: px,
        top: py,
        backgroundPosition: bgp
      });

    }
  }
})

向动态移动元素添加放大效果的问题

1 个答案: