将图像从屏幕外随机移动到中心答案

【问题标题】：Moving an image randomly from outside of the screen to the center将图像从屏幕外随机移动到中心
【发布时间】：2016-10-24 13:05:18
【问题描述】：

我在这个问题上纠结太久了。我需要将一只飞猫的图像从屏幕外的随机位置移动到出现在中心的位置，然后出现一个对话气泡，然后这只猫走到屏幕外的随机位置。所有这一切都发生在 Onclick 上。

【问题讨论】：

到目前为止你做了什么？
定位如何？在哪里？
嗯，这是链接-codepen.io/sofiyashakeel/pen/YGdNwb
基本上图像需要从用户不可见的随机位置（屏幕外）移动并出现在中心并在那里停留几秒钟（延迟）。在此延迟之后，它必须随机移回用户看不到的位置。

标签： jquery css image

【解决方案1】：

假设猫完全不在屏幕上

jQuery

$('#element').click(function(){
  var catWidth = $('.cat').width()/2,
  catHeight = $('.cat').height()/2,
  left = 'calc(50% - '+catWidth+'px)',
  top = 'calc(50% - '+catHeight+'px)';

  $('.cat').css('left', left);
  $('.cat').css('top', top);

));

CSS

.cat {
    transition: all 2s;
    position: absolute;
    left: 101%;
    top: 101%;
}

把这个js放在你想要点击的点击函数中，这会将img移动到屏幕的中心。

【讨论】：

不鼓励会员帮助那些没有努力解决自己问题的用户。这样做会鼓励他们自己和其他人在未来变得如此懒惰。
你说得对，但我才刚刚开始我的旅程，真的不介意一些帮助。谢谢！ :)
它不是完整的解决方案，但是，了解一下： $(".button").click(function() { $(".cat").animate({left:1400},500) .delay(1000).animate({left:-100},500); })
好的，所以我找到了另一种将图像移至中心的方法，即通过将图像移动到单击鼠标的位置，因此从技术上讲，它将靠近按钮。 $(document).click(function(event) { var x = event.pageX, y = event.pageY; $('.cat').animate({ top: y - 36, left: x - 36 }, 500 ); });
但我仍然需要弄清楚如何让图像从容器外的任何随机方向移动。