鼠标移动jQuery视差移动元素
问题描述:
我有一个小问题。我的代码,我在鼠标移动元素也移动X和Y轴。我想要得到的是让元素只在X轴上移动并停留在页面的底部。鼠标移动jQuery视差移动元素
我尝试删除Y轴命令的所有字符串,它停止移动元素Y轴,但居中元素 - 它的主要问题,我希望它停留在底部。
$(document).ready(function() {
var movementStrength = 25;
var height = movementStrength/$(window).height();
var width = movementStrength/$(window).width();
$("#top-image").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;
$('#top-image').css("background-position", newvalueX+"px "+newvalueY+"px");
});
});
谢谢。
答
我不确定我是否明白你想要做什么,但我认为你正在试图让#top-image div保留在页面底部?如果是的话,你这条线围绕它的Y轴:
var pageY = e.pageY - ($(window).height()/2);
var newvalueY = height * pageY * -1 - 50;
如果你想它的底部,它应该是这样的:
var newValueY = e.pageY - yourImageHeight;
但是,如果你正在使用背景位置,为什么不只是设置background-position-x,并保持background-position-y一样?
$('#top-image').css("background-position-x", newvalueX + "px");
非常感谢,你是天才! – user8520822
另一个问题。是否有可能在整个页面检测到特定元素悬停的鼠标移动? – user8520822
当然,只需在窗口上使用mousemove:$(window).on('mousemove',function(e){}) –