鼠标移动背景运动
问题描述:
我想在鼠标悬停在div上时发生微妙的移动。鼠标移动背景运动
但是,微妙的部分并没有完全解决。
只要将鼠标悬停在上面,背景图像就会跳转。
$(document).ready(function() {
var movementStrength = 50;
var height = movementStrength/$(window).height();
var width = movementStrength/$(window).width();
$("#bg").mousemove(function(e){
var pageX = e.pageX - ($(window).width()/2);
var pageY = e.pageY - ($(window).height()/2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('#bg').css("background-position", newvalueX+"px "+newvalueY+"px");
});
});
答
你可以添加一个类与过渡,使用超时等待过渡结束,然后取出类:
$(document).ready(function() {
var movementStrength = 50;
var height = movementStrength/$(window).height();
var width = movementStrength/$(window).width();
$("#bg").on({
mouseenter: function(e) { // on mouse enter
var pageX = e.pageX - ($(window).width()/2);
var pageY = e.pageY - ($(window).height()/2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('#bg').addClass('transition'); // add a transition
$('#bg').css({ // move background with transition
"background-position": newvalueX + "px " + newvalueY + "px"
});
setTimeout(function() { // wait .3s
$('#bg').removeClass('transition'); // remove the transition
}, 300);
},
mousemove: function(e) { // on mouse move
var pageX = e.pageX - ($(window).width()/2);
var pageY = e.pageY - ($(window).height()/2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
if ($('#bg').hasClass('transition')) { // if there is a transition
//wait for above timeout to remove transition
} else { // else no transition
$('#bg').css({ // move the background without transition
"background-position": newvalueX + "px " + newvalueY + "px"
});
}
}
});
});
#bg {
background: url('http://netsketched.com/pandf/img/sun-rise-clouds.jpg');
background-size: 100% 100%;
width: 250px;
padding: 100px;
}
.transition {
/*class with transition*/
transition: all .3s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="bg">
<h2>Hello, world!</h2>
</div>
+0
美丽。谢谢。 – John
你想要延迟还是稍微移动? – renakre
我在找轻微的动作 – John
你可以试试'newvalueX/5 +“px”+ newvalueY/5 +“px”' – renakre