Fatal编程技术网
  • javascript/
  • Javascript 如何在HTML中添加JQuery代码？

Javascript 如何在HTML中添加JQuery代码？

javascript jquery html

Javascript 如何在HTML中添加JQuery代码？,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用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){ $(

我正在尝试使用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>


$（函数（）{
$（“body”）.mousemove(
职能（e）{
$("")
.css({
'位置'：'绝对'，
“顶部”：e.pageY+5，
“左”：e.pageX+-15，
“宽度”：“30px”，
“高度”：“30px”
}).prependTo（$（document.body））
.衰减（100，'线性'，函数（）{
$（this.remove（）；
});
});
});
当我运行html文件时，我看不到任何东西，因为它，我认为我在代码中犯了错误，有人能帮我修复吗？

将鼠标侦听器附加到
$（文档）
而不是
$（'body'）

此外，在代码中，您丢失了关闭
和开始
标记（您在选择器中使用的标记）

Demo

将鼠标侦听器连接到
$（文档）
而不是
$（“正文”）

此外，在代码中，您丢失了关闭
和开始
标记（您在选择器中使用的标记）

演示

虽然代码中几乎没有错误，但它工作正常

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


$（函数（）{
$（函数（）{
$（“html”）.mousemove(
职能（e）{
对于（i=0；i<5；i++）{
$("")
.css({
'位置'：'绝对'，
“顶部”：e.pageY+i*5，
“左”：e.pageX+i*10，
“宽度”：“30px”，
“高度”：“30px”
}).prependTo（$（document.body））
.衰减（100，'线性'，函数（）{
$（this.remove（）；
});
}
});
});
});
添加内容
一些内容
试验

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

或者试试这个，Test

虽然代码中几乎没有错误，但它可以正常工作

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


$（函数（）{
$（函数（）{
$（“html”）.mousemove(
职能（e）{
对于（i=0；i<5；i++）{
$("")
.css({
'位置'：'绝对'，
“顶部”：e.pageY+i*5，
“左”：e.pageX+i*10，
“宽度”：“30px”，
“高度”：“30px”
}).prependTo（$（document.body））
.衰减（100，'线性'，函数（）{
$（this.remove（）；
});
}
});
});
});
添加内容
一些内容
试验

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

或者试试这个，Test

在我的[chromium]上运行良好（很明显，里面什么都没有，但当你点击鼠标时，会有星星）。你在代码上做了什么修改吗？你在这里发布的HTML代码是错误的，你忘记了一些结束标记。你在这里使用的是
HTML
而不是
body
：你在用body标记结束head标记？你似乎丢失了开头的
标记，而你的结束标记在我的[chromium]上工作得很好（很明显，里面什么都没有，但是当你点击鼠标时会看到星星）。你对代码做了任何更改吗？你在这里发布的HTML代码是错误的，你忘记了一些结束标记。这里使用的是
HTML
而不是
body
：你正在使用body标记关闭head标记？你似乎丢失了开头的
标记和结束的
。大家好，感谢大家的回答！这是错误的ks现在很好，但是我需要在不同的地方添加几个图像，对于它，你可以如何在代码中添加更多的.png图像吗？嗨，xcoat，我尝试了你的代码，Firefox现在工作得很好，但是就像我说的，我需要在不同的地方添加几个png图像，可以添加任何数组或其他东西吗？谢谢需要做一些类似于此dynamicdrive.com/dynamicCindEx13/trailer.htm的操作，但一个gif对象应位于中心，其他gif对象应位于其周围。感谢我这样做了，并且始终只显示一个imageHi xcorat，再次感谢我的无知，但在您的代码中多次显示相同的图像，我需要添加不同的图像nt图片和比这更大一点的图片。可能吗？最好的RegardsHi，谢谢你的回答！它现在工作正常，但我需要在不同的地方添加几个图片，为了它，你能不能在代码中添加更多的.png图片？嗨xcoat，我试过你的代码，Firefox现在工作正常，但正如我说的，我会需要将几个png图像添加到一起并放在不同的位置，是否可以添加任何数组或其他内容？ThanksI需要做一些类似于dynamicdrive.com/dynamicCindEx13/trailer.htm的操作，但其中一个gif对象应该在中间，其他gif对象应该在其周围。Thanksys我做了，并且始终只显示一个imageHi xcorat，再次感谢抱歉我的无知，但是在你的代码中，同一个图像出现了好几次，我需要添加不同的图像，并且比这个图像大一点。可能吗？最好Regards@AlejandroCastan，我更新了答案。如果有用，请单击接受答案。@AlejandroCastan，我更新了答案。如果有用请单击以接受答案。