Javascript jQuery效果在JSFIDLE中工作，但在脱机/联机中不工作_Javascript_Jquery_Html_Css

Javascript jQuery效果在JSFIDLE中工作，但在脱机/联机中不工作

javascript jquery html css

Javascript jQuery效果在JSFIDLE中工作，但在脱机/联机中不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,嗨，我已经有这个问题大约4个月了，现在我放弃了，但现在我必须解决它，我尝试在hover上做一个放大效果，我做了所有的代码，它工作正常，但当我复制它并粘贴在编辑器中，或者像它自己的代码一样，它不工作，我尝试了Firefox（最新版本）和Google chrome（也是最新版本）但是仍然没有效果什么也没有发生，而且我试着使用谷歌的cdm，也试着从网站下载jQuery本身没有效果，请帮助我，因为我只是一个编码初学者谢谢我的HTML： <html> <head>

嗨，我已经有这个问题大约4个月了，现在我放弃了，但现在我必须解决它，我尝试在hover上做一个放大效果，我做了所有的代码，它工作正常，但当我复制它并粘贴在编辑器中，或者像它自己的代码一样，它不工作，我尝试了Firefox（最新版本）和Google chrome（也是最新版本）但是仍然没有效果什么也没有发生，而且我试着使用谷歌的cdm，也试着从网站下载jQuery本身没有效果，请帮助我，因为我只是一个编码初学者谢谢

我的HTML：

    <html>
<head>
    <title>Random Page</title>
    <link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
</head>
<body>
    <img src="RandomPage.png">

    <p style="margin-right:220px; margin-top:20px; float:right; font-size:22px; font-family:century gothic; id="nav2" ">I <a id="nav" href="">HOME</a> I <a id="nav" href="">Apple</a> I <a id="nav" href="">Android</a> I <a id="nav" href="">Gaming</a> I <a id="nav" href="">Random Tech</a> I <a id="nav" href="">About Us</a> I </p>

    <div id="menu">
        <img style=" margin-top:10px; margin-left:10px; border-radius:4px; " src="RandomGaming.png" class="resizableImage">
         <img style=" margin-top:10px; border-radius:4px;" src="RandomFashion.png" class="resizableImage">
    </div>
</body>

提前感谢您

您的示例HTML不包括jQuery。

您需要添加jQuery库，它必须是您添加的第一件事

将此

粘贴到您的头标签中，并确保它是第一个脚本。

将下面的脚本放在您头中的脚本下面。因此，请记住：

<head>
    <title>Random Page</title>
    <link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- include future js scripts here -->
</head>


随机页面

然后在结束标记之前，添加jQuery代码，如下所示：

<script>
$(document).ready(function(){  

    $('.resizableImage').mouseenter(function() {
        $(this).stop().animate({ width: "+=10%", height: "+=10%" });
    });

    $('.resizableImage').mouseleave(function() {
        var x = $(this).attr('width'),
        y = $(this).attr('height');

        $(this).stop().animate({ width: x, height: y });
    });

});
</script>


$（文档）.ready（函数（）{
$（'.resizebleimage'）.mouseenter（函数（）{
$（this.stop（）.animate（{宽度：+=10%，高度：+=10%}）；
});
$（'.resizebleimage'）.mouseleave（函数（）{
var x=$（this.attr（'width'），
y=$（this.attr（'height'）；
$（this.stop（）.animate（{width:x，height:y}）；
});
});

注意：如果在函数上方的结束标记之前包含JS脚本，则效率更高，页面加载速度更快。但为了简单起见，我将其包含在

中，这也不错。

可能重复此功能。关于您的站点，这里没有足够的信息可以提供帮助。我不会随便猜一猜，这可能是1）文件路径/url问题，2）加载顺序，或3）编辑器剥离代码。看起来您没有调用jquery库，只是旁注，您的HTML无效，

id

需要唯一，您多次使用id

nav

。您从未关闭过

标记中的

style

属性，而

img

是自动关闭标记。在您的站点上，以及在开发人员工具（Chrome或Firebug）中，在控制台中键入此项，并让我知道显示的版本：$.fn.jqueryI我知道这一点，但我建议将所有库等放在一个位置-顶部。嗯，不管怎样，我加了一句“我记得吗？”？你误传了。如果在函数上方的结束标记之前包含JS脚本，那么它会更高效，并允许您更快地加载页面。我添加了它，但仍然没有发生任何事情。天哪，先生，它成功了，但现在，当我将鼠标悬停在它上面时，它一直在放大，当我将鼠标移出时，它不会回到原来的大小。你能解释一下为什么一个必须在

头部

，另一个必须在

身体

末端吗？这两个都可以工作。但是，浏览器会停止呈现页面，直到每个JavaScript块都执行完毕。对于小JavaScript块，这不是一个大问题。但是，对于大型库，页面加载时间可能会大幅增加。是的，因此，尤其是库应该在关闭

body

标记之前添加，而不是在头部。绝对！请参见我的答案中的“备注”。）也就是说，通常我只需要几个基本脚本，比如我的头中的jQuery。然后在我的主体标记之前渲染其他对象。我将始终使用的代码放在标题中，这样我就不会在视图中重复代码，等等。

<script>
$(document).ready(function(){  

    $('.resizableImage').mouseenter(function() {
        $(this).stop().animate({ width: "+=10%", height: "+=10%" });
    });

    $('.resizableImage').mouseleave(function() {
        var x = $(this).attr('width'),
        y = $(this).attr('height');

        $(this).stop().animate({ width: x, height: y });
    });

});
</script>