将图像移动到鼠标位置？

Question

将图像移动到鼠标位置？

javascript

5

我对JavaScript非常陌生，只是在尝试学习 :)

我的意图是将一张图片（最终将成为一个精灵）放置在默认位置，当我点击屏幕上的右键时，我希望该图片逐渐移动到那个位置？

我做了一些研究，但没有找到特定的答案。

最终，我想创建一个动画游戏人物，可以使用鼠标右键在屏幕上移动。

- lross1309

你应该尝试使用jQuery和jQuery UI框架。请访问jquery.com。 - John Hartsock

1

通常情况下，右键绑定于显示上下文菜单，覆盖它是惹恼用户的好方法。用户可以在浏览器设置中禁用隐藏默认上下文菜单的可能性，而在仍然显示菜单的情况下右键单击执行某些操作并不是最美观的事情。因此，我建议将行为更改为左键双击或其他事件。 - jakub.g

4个回答

2

据我所知，目前还没有一种可靠且跨浏览器的方式来处理右键单击事件，因此建议您仅使用左键单击。考虑到您非常非常新手，您可能想使用jQuery。关于在屏幕上动画显示对象，我建议您查看jQuery的animate()示例。

- airportyh

0

如果可以的话，我会避免使用右键点击。在Firefox和Chrome中找到了支持，但在IE中遇到了问题。

如果你选择使用左键点击，我会使用jQuery框架（http://jquery.com/）。

你可以捕捉页面上的任何位置的点击事件，然后从事件中获取坐标。利用这些坐标，你就可以改变想要移动的元素的CSS：

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function($){

    $(document).click(function(e){

        $('#element').animate( { "top": e.pageY + "px" }, { queue: false, duration: 1500 }).animate({ "left": e.pageX + "px" }, 1500 );

    });

</script>

</head>
<body>

<div id="element" style="width:100px; height:100px; background:red; position:absolute;"></div>

</body>
</html>

- Dan Ellis

0

通常情况下，我会同意操纵鼠标右键是个坏主意。但在制作游戏的情况下，控制鼠标右键实际上是完全可以接受的，甚至是期望的。大多数需要控制鼠标右键的原因在这种情况下都消失了，它可以用来增加游戏的功能性（用户首先访问页面的原因），而不是减少功能性（不要操纵鼠标右键的常见原因）。

话虽如此，jQuery并不是这种事情的最佳选择。它并不适合于游戏开发。相反，应该研究html5游戏开发。有一些不同的游戏引擎可以使这种事情变得容易，目前最好的资源列表是HTML5 Games Resource Section。

Construct2甚至不需要太多的编程理解！

- thedaian

虽然在某些情况下可能是可以接受的，但这并不改变它不可靠的事实。在Firefox中，可以将dom.event.contextmenu.enabled设置为false（在选项中可用作“允许脚本禁用或替换上下文菜单”），在Opera中，即使在Google Maps中，右键菜单也无法使用。但当然一切都取决于目标群体等因素。 - jakub.g

@jakub 这就是为什么我建议使用游戏引擎库。大多数/全部解决这些问题，就像jQuery解决其他事情的跨浏览器问题一样（这也是为什么每个人都推荐它的原因）。 - thedaian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Loktar · Accepted Answer

像其他人说的一样，要远离右键点击，这里是使用jQuery的示例。

演示

var $follower = $("#follower"),
    mouseX = 0, 
    mouseY = 0;

$(document).click(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
   $follower.stop().animate({left : mouseX, top: mouseY});
});

and pure JS 已于2017年更新，使用requestAnimationFrame代替setTimeout

演示

var mouseX = 0, 
    mouseY = 0,
    follower = document.getElementById("follower"),
    xp = 0,
    yp = 0;

document.onclick = function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
};

function animate(){
    requestAnimationFrame(animate);
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.style.left = xp + 'px';
    follower.style.top= yp + 'px';
}

animate();