Question

我想在鼠标移动时在我的网站上显示图像。这似乎是一件愚蠢的事情，但是当页面加载图片时，这一点非常重要。

我的HTML是这样的：

<html>
<head>
</head>
<body>
    <div class="page-container">
        <div>
          <a id="entrar" href="_pt/log_in.html"><img src="_assets/entrar.jpg" alt="entrar"></a>
        </div>
    </div>
<script src="_js/jquery-1.10.2.js"></script>
<script src="_js/jquery-ui-1.10.3.js"></script>
<script src="_js/exp.js"></script>
</body>
</html>

在我的CSS中，我的图像不可见

#entrar {
    display: none;
}

在我的Javascript中：

function PrepareHandlers() {
    $(".page-container").mousemove(function(){
        $("a#entrar").css("display", "inline"); 
    });
}
...
window.onload = function(){
    ....
    PrepareHandlers();
}

有人能告诉我我做错了什么吗？感谢

Answer 1

页面容器似乎没有占用任何空间，因此它永远不会收到mousemove事件。这是一个简单的CSS修复来测试这个理论：

body { position : absolute; top :0; bottom : 0; left : 0; right: 0;} 
.page-container { width : 100%; height : 100%; background-color : #ddd; }

Check out this solution.

您应该预先加载图像，以尽量减少或避免令人讨厌/混淆的延迟：

var img = new Image();
img.src = '//your/url/to/image';

Answer 2

在源文件中声明，而不是在函数内部！

 $(document).ready( function(){
    $(".page-container").mousemove(function(){
        $("a#entrar").css("display", "inline"); 
    });
})

JQuery：图像通过鼠标移动显示？

2 个答案: