在 jQuery 动画的每一步捕获鼠标坐标
Posted
技术标签:
【中文标题】在 jQuery 动画的每一步捕获鼠标坐标【英文标题】：Capturing the mouse coordinates on every step of a jQuery animation 【发布时间】：2012-02-26 14:30:06 【问题描述】：我正在尝试在 jQuery 动画期间获取鼠标坐标，我这样做是因为我正在开发一个交互式插件，它将 div 内的背景图像从 covercss 属性移动到100% 用户越过元素时的比例。
我即将完成plug-in，但动画有问题，因为它适用于由 jQuery 的mousemove 事件触发的鼠标的最后一个位置。
有没有办法避免这个问题？
这是我的情况：
$(settings.selector).hover(function (e)
$(this).bind('mousemove', setFollowMouse);
, function ()
$(this).unbind('mousemove', setFollowMouse);
zoomOut();
);
var setFollowMouse = function (e)
var o = offsetLeft:this.offsetLeft, offsetTop:this.offsetTop;
if (!settings.bg.zooming_in && settings.bg.current_scale != 100)
settings.bg.zooming_in = true;
zoomIn(e, o);
else
followMouse(e, o);
var zoomIn = function (e, o)
$(scale:settings.bg.min_perc).animate (
scale:100
,
easing:settings.zoom_in.easing,
duration:settings.zoom_in.duration,
step:function ()
settings.bg.current_scale = this.scale;
followMouse(e, o);
,
complete:function ()
settings.bg.current_scale = 100;
settings.bg.zooming_in = false;
followMouse(e, o);
);
var followMouse = function (e, o)
var m_x = e.pageX - o.offsetLeft;
var m_y = e.pageY - o.offsetTop;
settings.bg.perc_pos_x = ((m_x * 100) / (a_w - bg_w)) + '%';
settings.bg.perc_pos_y = ((m_y * 100) / (a_h - bg_h)) + '%';
var bg_w = getScalePercent(settings.bg.width, settings.bg.current_scale);
var a_w = settings.container.width;
var bg_h = getScalePercent(settings.bg.height, settings.bg.current_scale);
var a_h = settings.container.height;
var bpx = - (bg_w - a_w) * m_x / a_w;
var bpy = - (bg_h - a_h) * m_y / a_h;
$(settings.selector).css(
backgroundPosition:bpx + 'px ' + bpy + 'px'
,backgroundSize:bg_w + 'px ' + bg_h + 'px'
);
如您所见，我使用动画来计算背景图像的渐进缩放，并尝试使用跟随鼠标方法进行计算，但如果我停止移动鼠标，动画将与最后一个 mousemove @ 987654328@ 和Y 鼠标位置。
我这样做是因为如果我尝试用鼠标连续重写动画方法，我会遇到问题。
我应该采取一些不同的方法来避免这个错误吗？
【问题讨论】：
【参考方案1】：原谅我狡猾的数学；但这应该会有所帮助！
<html>
<head>
<script type="text/javascript" charset="utf-8">
window.onload = function ()
var img = new Image();
img.src = 'http://wallpapers.free-review.net/wallpapers/23/Autumn_Theme_-_Windows_7_Backgrounds.jpg';
var canvas = document.getElementById("canvas1");
canvas.width = img.width;
canvas.height = img.height;
canvas.addEventListener('mousemove', onMouseMove, false);
var ctx = canvas.getContext("2d");
var scale = 0.9;
var scaledwidth = canvas.width * scale;
var scaledheight = canvas.height * scale;
var scaledcenterX = scaledwidth /2;
var scaledcenterY = scaledheight /2;
var animloop = setInterval(function()
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, scaledwidth, scaledheight, canvas.width - scaledcenterX, canvas.height - scaledcenterY, 0, 0, canvas.width, canvas.height);
, .01);
function onMouseMove(e)
mouseX = e.clientX - canvas.offsetLeft;
mouseY = e.clientY - canvas.offsetTop;
scale = mouseX/1000;
scaledwidth = canvas.width * scale;
scaledheight = canvas.height * scale;
;
</script>
<style>
body
background: #001;
background-size: cover;
overflow: hidden;
#canvas1
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
height: 100% auto;
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
</body>
</html>
【讨论】：
我真的很想用画布工作，现在我更喜欢完成我已经开始的jQuery plug-in的路径，因为现在已经完成了！【参考方案2】：
我刚刚通过这个简单的代码编辑解决了这个问题：
var setFollowMouse = function (e)
settings.mouse.x = e.pageX - this.offsetLeft;
settings.mouse.y = e.pageY - this.offsetTop;
if (!settings.bg.zooming_in && settings.bg.current_scale != 100)
settings.bg.zooming_in = true;
zoomIn();
else
followMouse();
旧的：
var setFollowMouse = function (e)
var o = offsetLeft:this.offsetLeft, offsetTop:this.offsetTop;
if (!settings.bg.zooming_in && settings.bg.current_scale != 100)
settings.bg.zooming_in = true;
zoomIn(e, o);
else
followMouse(e, o);
这已经消除了错误行为。
【讨论】：
以上是关于在 jQuery 动画的每一步捕获鼠标坐标的主要内容，如果未能解决你的问题，请参考以下文章