Mousemove动画
Mousemove动画
提问于 2014-05-15 16:33:59
你好，我正在努力实现这个效果，我不想用某种轻松的效果来达到这个效果，但实际上我不知道如何实现去加速效果，到目前为止，我所做的就是这个http://jsfiddle.net/xtatanx/8RB24/1/。
var $container = $('#container');
var contWidth = $container.width();
var $point = $('.point');
var delay = 100;
$container.mousemove(function(e){
clearTimeout(timer);
var timer = setTimeout(function(){
console.log(e.offsetX);
$point.each(function(){
if( e.offsetX > (contWidth - $point.width())){
return;
}
var xp = $(this).position().left;
xp += parseFloat((e.offsetX - xp)/ 20);
$(this).css({
left: xp
});
});
}, delay);
});但我认为动画并不像马里奥网站那么流畅，如果你们能帮助我获得资源或者指导我达到这个效果，我会很感激。非常感谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-15 17:04:23
你的不稳定是因为它只运行在摩丝情绪事件上。如果你把它分解成一个间隔(比如每秒30帧)，它就会平滑得多。这样，即使鼠标停止，它也会继续放松。
var $container = $('#container');
var contWidth = $container.width();
var $point = $('.point');
var delay = 100;
var decay = .1;
var intervalId;
var mouseX, mouseY;
//this function is called 30 times per second.
function ticker(){
$point.each(function(){
if( mouseX > (contWidth - $point.width())){
mouseX = (contWidth - $point.width()); //instead of returning, just set the value to the max
}
var xp = $(this).position().left;
xp += parseFloat((mouseX - xp) * decay); //using a decay variable for easier tweaking
$(this).css({
left: xp
});
});
}
//this interval calls the ticker function every 33 milliseconds
intervalId = setInterval(ticker, 33); //33 millisecond is about 30 fps (16 would be roughly 60fps)
$container.mousemove(function(e){
mouseX = e.offsetX; //store the current mouse position so we can reference it during the interval
mouseY = e.offsetY;
});Stack Overflow用户
发布于 2014-05-15 17:07:03
看看这个。不确定这是你想要的，但它确实有“一个”把戏。
$container.mousemove(function(e){
var xp = e.clientX-offset;
blue.css({
left: xp+'px'
});
});http://jsfiddle.net/d65yan/8RB24/2/
看看.blue{} css，如果您想要支持moz和chrome的旧版本，那么就需要一些vendro前缀，但是不要考虑到版本9的ie。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23683990
复制相关文章
相似问题
腾讯云开发者
