Question

我试图让我的背景图像随着鼠标移动而移动到#titleheader类对象上。页面渲染正常，但功能不会激活。我在Django工作。我已经从基本模板添加了第一个（页面顶部）#titleheader对象，该对象扩展到包含另一个#titleheader对象的主模板。我已将这两个模板编译成chrome在渲染下面的页面时会看到的内容。我怀疑该行中存在错误：$(this.target).css('background-position', event.pageX + 'px ' + event.pageY + 'px');但我无法弄清楚我的代码中要更改的内容。

我的索引页面如下：

    <!doctype html>
<html>
    <head>
        <style> #landing-content {
  background-size: 110%;
  height: 110%;
  width: 110%;
  overflow: hidden;
  background-repeat: no-repeat;
        } </style>

        <title>Home Page</title>
        <link rel="stylesheet" href="/static/courses/css/layout.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <script>
            $(document).ready(function(){
                $(".titleheader").mousemove(function(event){
                    $(this.target).css('background-position', event.pageX + 'px ' + event.pageY + 'px');
                });
            });
        </script>
    </head>

<body id="landing-content" background="/static/courses/images/back7.jpg">
  <section class="site-container slider">
    <article class="glass down">
      <div class="titleheader" style="width:100%;height:80px;position:absolute;top:0;bottom:100%;left:0;right:0;background-color:rgba(229,240,247,0.7);border-width:1px;z-index:0;border-bottom-style:solid;border-color:#f0fafb;">
    <a href="/" class="titleheaderimg">
        <img src="/static/courses/images/tz_blue2.png" alt="G" class="titleheaderimg" style="z-index:100;opacity:1;align-self:center;position:relative;top:9%;left:1%;">
    </a>
      </div>
    </article>

<div style="height:100px;">
    <p>
    </p>
</div>
<div class="centrediv" style="width:720px;position:absolute;top:26%;bottom:45%;left:0%;right:0;margin:auto;background-color:rgba(229,240,247,0.7);border-radius:20px;border-color:#f0fafb;border-width:1px;">
    <h2 style="text-align:center;vertical-align:middle;opacity:1">Hi,<span><br><br></span>We are a <span><a href="/courses/team/">XYZ based team</a></span> that works with educators to improve their efficiency using state-of-the-art language processing technology.<span></span>
        <br><span><a href="/courses/product/">Know more.</a></span></h2>
</div>

<div class="centrediv" style="position:absolute;top:86%;bottom:0;left:47%;right:0;margin:auto;">
    <h3><a href="/courses/contact/">Contact us.</a></h3>
</div>

  </section>
</body>
</html>

更新：

代码现在已更新，控制台，pycharm，chrome dev工具或任何地方都没有错误。背景仍然没有移动！有人可以帮我解决这个问题吗？谢谢！

Answer 1

根据mouseevent.pageX上的MDN，

此功能不符合标准，不符合标准。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现之间可能存在很大的不兼容性，并且行为可能在将来发生变化。

您说您正在使用Chrome，并且Chrome 列为支持pageX和pageY访问者的唯一浏览器，但可能值得考虑另一种方式。所有现代浏览器都支持MouseEvent.clientX - 您可以使用它吗？

另外，我遇到了$(this)选择器的问题 - 当方法只处理一个元素时，我更喜欢使用完全限定的元素选择器。可能值得一试。

祝你好运！

我的JQuery函数不会激活

1 个答案: