jQuery Mousemove：在坐标处将事件抛出到另一个元素中

Question

How do I persist/broadcast the mouse movements of one element into another (with exacting coordinates)? Note that the zoom effect of DIV B should work when the generated jQuery .mousemove() is triggered. See code in snippet or this fiddle for further context.

 // Code by Magnify JS maintained by thdoan // http://thdoan.github.io/magnify/ // https://github.com/thdoan var native_width = 0; var native_height = 0; //Now the mousemove function $(".magnify").mousemove(function(e) { //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 { //x/y coordinates of the mouse //This is the position of .magnify with respect to the document. var magnify_offset = $(this).offset(); //We will deduct the positions of .magnify from the mouse positions with //respect to the document to get the mouse positions with respect to the //container(.magnify) var mx = e.pageX - magnify_offset.left; var my = e.pageY - magnify_offset.top; //Finally the code to fade out the glass if the mouse is outside the container if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $(".large").fadeIn(100); } else { $(".large").fadeOut(100); } if ($(".large").is(":visible")) { //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"; //Time to move the magnifying glass with the mouse var px = mx - $(".large").width() / 2; var py = my - $(".large").height() / 2; //Now the glass moves with the mouse //The logic is to deduct half of the glass's width and height from the //mouse coordinates to place it with its center at the mouse coordinates //If you hover on the image now, you should see the magnifying glass in action $(".large").css({ left: px, top: py, backgroundPosition: bgp }); } } }); //http://stackoverflow.com/a/26782439/5076162 - Arun P Johny $(document).on('mousemove', function(e) { var event = $.Event('myevent', { pageX: e.pageX, pageY: e.pageY }); $(document).trigger(event); }); $(document).on('myevent', function(e) { log(e.pageX + ':' + e.pageY) }); var log = function(message) { var $log = $('#log'); $log.html(message) }; 

 /*Some CSS*/ * { margin: 0; padding: 0; } .magnify { width: 658px; margin: 50px auto; position: relative; } /*Lets create the magnifying glass*/ .large { width: 175px; height: 175px; position: absolute; border-radius: 100%; /*Multiple box shadows to achieve the glass effect*/ 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); /*Lets load up the large image first*/ background: url('https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG_FANCY.jpg') no-repeat; /*hide the glass by default*/ display: none; } /*To solve overlap bug at the edges during magnification*/ .small { display: block; } .throwMouse { width: 658px; height: 208px; display: block; background-color: #000; font-family: arial; margin: 0 auto; padding: 0; color: #FFF; vertical-align: middle; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- Lets make a simple image magnifier --> <div class="throwMouse"> <h3> DIV A: </h3> Throw this element's mousemove events INTO the .catchMouse element and have it behave as though the mouse were hovering over it. </div> <div class="magnify catchMouse"> <!-- This is the magnifying glass which will contain the original/large version --> <div class="large"></div> <!-- This is the small image --> <h3> DIV B: </h3> <img class="small" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG_FANCY.jpg" width="658" /> </div> <div id='log'> </div> 

Answer 1

You can try this

The idea is when the mouse over the .throwMouse div we simulate an a mouseover event on the .magnify div, so we need to adjust the mouse to be 200px down to be on that div

$('.throwMouse').on('mousemove', function(e) {
      var event = $.Event('myevent', {
        pageX: e.pageX,
        pageY: e.pageY + 200
      });
      $(".magnify").trigger(event);

    });

Then we add an event listener for the created event myevent on the .magnify div beside the old event mouseover

$(".magnify").on('mousemove myevent', function(e) { //});

You can check which div is the target of the event by checking event.target

if($(event.target).hasClass('throwMouse')){
 //do something specific for this div
}

 // Code by Magnify JS maintained by thdoan // http://thdoan.github.io/magnify/ // https://github.com/thdoan var native_width = 0; var native_height = 0; //Now the mousemove function $(".magnify").on('mousemove myevent', function(e) { //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 { //x/y coordinates of the mouse //This is the position of .magnify with respect to the document. var magnify_offset = $(this).offset(); //We will deduct the positions of .magnify from the mouse positions with //respect to the document to get the mouse positions with respect to the //container(.magnify) var mx = e.pageX - magnify_offset.left; var my = e.pageY - magnify_offset.top; //Finally the code to fade out the glass if the mouse is outside the container if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $(".large").fadeIn(100); } else { $(".large").fadeOut(100); } if ($(".large").is(":visible")) { //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"; //Time to move the magnifying glass with the mouse var px = mx - $(".large").width() / 2; var py = my - $(".large").height() / 2; //Now the glass moves with the mouse //The logic is to deduct half of the glass's width and height from the //mouse coordinates to place it with its center at the mouse coordinates //If the mouse is on the div A make the .large DIV up a 100px. if($(event.target).hasClass('throwMouse')){ py -= 100; } //If you hover on the image now, you should see the magnifying glass in action $(".large").css({ left: px, top: py, backgroundPosition: bgp }); } } }); //http://stackoverflow.com/a/26782439/5076162 - Arun P Johny $('.throwMouse').on('mousemove', function(e) { var event = $.Event('myevent', { pageX: e.pageX, pageY: e.pageY + 200 }); $(".magnify").trigger(event); }); $(document).on('myevent', function(e) { log(e.pageX + ':' + e.pageY) //$(".magnify").mouse }); var log = function(message) { var $log = $('#log'); $log.html(message) }; 

 /*Some CSS*/ * { margin: 0; padding: 0; } .magnify { width: 658px; margin: 50px auto; position: relative; } /*Lets create the magnifying glass*/ .large { width: 175px; height: 175px; position: absolute; border-radius: 100%; /*Multiple box shadows to achieve the glass effect*/ 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); /*Lets load up the large image first*/ background: url('https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG_FANCY.jpg') no-repeat; /*hide the glass by default*/ display: none; } /*To solve overlap bug at the edges during magnification*/ .small { display: block; } .throwMouse { width: 658px; height: 208px; display: block; background-color: #000; font-family: arial; margin: 0 auto; padding: 0; color: #FFF; vertical-align: middle; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- Lets make a simple image magnifier --> <div class="throwMouse"> <h3> DIV A: </h3> Throw this element's mousemove events INTO the .catchMouse element and have it behave as though the mouse were hovering over it. </div> <div class="magnify catchMouse"> <!-- This is the magnifying glass which will contain the original/large version --> <div class="large"></div> <!-- This is the small image --> <h3> DIV B: </h3> <img class="small" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG_FANCY.jpg" width="658" /> </div> <div id='log'> </div>