在javascript或jquery中将一个div的运动图像显示为另一个div

Question

当我单击图像时，它将进入另一个div，但是当它进入另一个div时，它应该显示从div A到div B的运动图像。有人可以尝试这样做吗？

Answer 1

I did this just for fun: fiddle

HTML

<div class="blue">
  <img src="http://fakeimg.pl/200/" class="move-me" />
  <img src="http://fakeimg.pl/200/" class="move-me" />
  <img src="http://fakeimg.pl/200/" class="move-me" />
</div>
<div class="green"></div>

jQuery

$(document).on('click', '.move-me', function(){
  var $img = $(this);
  var x1 = $img.position().left;
  var y1 = $img.position().top;
  var $imgCloned1 = $img.clone().css("visibility", "hidden");
  var $imgCloned2 = $imgCloned1.clone();
  $imgCloned2.insertAfter($img);
  $(".green").append($img);
  var x2 = $img.position().left;
  var y2 = $img.position().top;
  $img.css({'position':'absolute', 'left': x1 + 'px', 'top': y1 + 'px'});
  $imgCloned1.appendTo(".green");
  $img.animate({'left': x2, 'top': y2 + 'px'}, 1000, function() {
    $img.css({'position':'', 'left': '', 'top': ''});
    $img.removeClass("move-me");
    $imgCloned1.remove();
    $imgCloned2.remove();
  });
});

CSS

.blue, .green {
  min-height: 200px;
  margin: 30px
}

.blue {
  background: skyblue;
}

.green {
  background: lightgreen;
}

Answer 2

You can use the following script in order to move one image from one position to another based on the position of a "target" div.

• When you click on the image, image move to "target" div.
• When click on yellow box, you can change position of "target" div and on click on image you can preposition image again.

 (function(window) { var _app = { elmImage: null, elmTarget: null, imageGeometry: null, targetGeometry: null, getDomImage: function() { this.elmImage = document.getElementById('image'); }, getDomSourceGeometry: function() { this.imageGeometry = this.elmImage.getBoundingClientRect(); }, getDomtarget: function() { this.elmTarget = document.getElementById('target'); }, getDomTargetGeometry: function() { this.targetGeometry = this.elmTarget.getBoundingClientRect(); }, animate: function() { var top = this.targetGeometry.top + 'px', left = this.targetGeometry.left + 'px'; $(this.elmImage).animate({ top: top, left: left }); }, listenImageClick: function() { $(this.elmImage).click(function() { _app.animate(); }); }, listenChangeTarget: function() { $('#targetChange').click(function() { this.changeTargetPosition(); }.bind(this)); }, changeTargetPosition: function() { $(this.elmTarget).css({ top: '100px', left: '50px' }); this.logic(); }, logic: function() { _app.getDomImage(); _app.getDomSourceGeometry(); _app.getDomtarget(); _app.getDomTargetGeometry(); } }; this.elmImage = null; $(document).ready(function() { _app.logic(); _app.listenImageClick(); _app.listenChangeTarget(); }); })(window); 

 #target { position: absolute; top: 300px; left: 300px; width: 200px; height: 200px; background-color: darkgray; } #image { position: absolute; width: 200px; height: 200px; } #targetChange { position: absolute; top: 0; left: 300px; width: 300px; height: 20px; background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="target"></div> <img id="image" src="http://lorempixel.com/200/200/" alt="Smiley face" height="42" width="42"> <div id="targetChange"> Click here to change position target div</div>