1

我正在尝试使用 gif 文件制作鼠标效果，我发现以下代码：

<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>      
$(function(){
    $("body").mousemove(
        function(e){
            $("<img src='http://www.favicon.cc/logo3d/618187.png' />")
            .css({
                'position':'absolute', 
                'top':e.pageY+5,
                'left':e.pageX+-15,
                'width':'30px',
                'height':'30px'
            }).prependTo( $(document.body))
            .fadeOut(100, 'linear', function(){
                $(this).remove(); 
            });
        });
});
</script>
</body>

当我运行 html 文件时，我看不到任何东西，因为它，我认为我在代码中犯了一个错误，有人可以帮我修复吗？

4

2 回答 2

3

将鼠标侦听器附加到$(document)而不是$('body').

同样在您的代码中，您缺少结束标签</head>和开始<body>标签（您在选择器中使用的标签）。

演示在这里

于 2013-09-10T22:07:43.323 回答
1

While you have few errors in the code, it works fine.

The reason you don't see anything in firefox is that the body of the HTML is empty and the stars won't show up unless there's content.

It works fine on chromium and rekonq.

Just add content, and it will work fine

<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>      
$(function(){
    $(function(){
$("html").mousemove(
    function(e){
        for(i = 0; i < 5; i++){
            $("<img src='http://www.favicon.cc/logo3d/618187.png' id='hover_" +i+"' />")
            .css({
                'position':'absolute', 
                'top':e.pageY+i*5,
                'left':e.pageX+i*10,
                'width':'30px',
                'height':'30px'
            }).prependTo( $(document.body))
            .fadeOut(100, 'linear', function(){
                $(this).remove(); 
            });
        }
    });
});
});
</script>
</head>
<body>
<h1> Add content </h1>
<p> some content </p>
</body>
</html>

Test jsfiddle

you can change the dimensions as you want. If you want you can create an array with the given dX and dY changes and use that to position the images.

or try this, Test jsfiddle

于 2013-09-10T22:17:09.207 回答