如何在HTML中添加JQuery代码？

Question

我试图用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文件时，我看不到任何东西，因为它，我认为我在代码中犯了错误，有人能帮我解决吗？

Answer 1

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

同样在您的代码中，您缺少结束</head>并启动<body>标记（您在选择器中使用）。

在这里演示

Answer 2

虽然代码中的错误很少，但它可以正常工作。

你在firefox中没有看到任何东西的原因是HTML的主体是空的，除非有内容，否则星星不会出现。

它适用于铬和rekonq。

只需添加内容，它就可以正常工作

<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>

测试jsfiddle

您可以根据需要更改尺寸。 如果需要，可以使用给定的dX和dY更改创建数组，并使用它来定位图像。

或试试这个，测试jsfiddle

如何在HTML中添加JQuery代码？

问题描述

2 个解决方案

解决方案1
3 2013-09-10 22:07:43

解决方案2
1 2013-09-10 22:17:09

如何在HTML中添加JQuery代码？

问题描述

2 个解决方案

解决方案1 3 2013-09-10 22:07:43

解决方案2 1 2013-09-10 22:17:09

解决方案1
3 2013-09-10 22:07:43

解决方案2
1 2013-09-10 22:17:09