gpt4 book ai didi

jquery - 使用光标移动背景图像不起作用

转载 作者:可可西里 更新时间:2023-11-01 13:11:41 24 4
gpt4 key购买 nike

我创建了一个随光标一起移动的网页背景。你可以在这里看到它的 Action :http://jsfiddle.net/juhant/jxthp/32/

但是一旦我向网页添加一些内容,移动就不再正常工作了。当光标悬停在文本、图像或任何内容上时,背景图像停止移动。我怎样才能让它正常工作?

HTML 看起来像这样:

<body>
<div id="pageBg"></div>
<div class="container">
<div class="sixteen columns"> <img src="images/logo.png" id="logo" class="scale-with-grid" alt="webweaver logo"/> </div>
<!--end sixteen columns-->

<div class="sixteen columns">
<h1>Just testing</h1>
<br />

<h2>Just testing</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--end sixteen columns-->


</div>
<!-- container -->

我试图通过将 pageBG id 移动到 body 标签来修复它,这使它可以正常工作,但是我无法控制图像的高度。我不希望它无限扩展,因为稍后我想在它下面添加一些其他内容。

提前谢谢你。

最佳答案

问题是因为 mousemove 事件没有传播到内容就位的 #pageBg 元素。将事件卡在 document 之外:

$(document).mousemove(function (e) {
var mousePosX = (e.pageX / $(document).width()) * 100;
var mousePosY = (e.pageY / $(document).height()) * 100;

$('#pageBg').css({
'background-position': mousePosX + '%' + mousePosY + '%'
});
});

Example fiddle

关于jquery - 使用光标移动背景图像不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19837592/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com