Question

嗨我已经有这个问题大约4个月了，现在我放弃了，但现在我必须解决它我试图在悬停上做一个放大效果，我做了所有的代码，它工作正常，但是当我复制它并将其粘贴在编辑器中或像它自己的代码不起作用我尝试了Firefox（最新版本）和谷歌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>

我的剧本：

$(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 });
});
});

先谢谢你

Answer 1

您的示例HTML不包含jQuery。

Answer 2

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

将此<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>粘贴到您的head标记中，并确保它是那里的FIRST脚本。

Answer 3

将下面的脚本放在脚本下面。所以请说谎：

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

然后在结束</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>

注意：如果您的JS脚本包含在函数上方的结束标记之前，它会更高效并允许您的页面加载更快..但为了简单起见，我将其包含在{{1这也不错。

jQuery Effects在jsfiddle中工作，但在离线/在线时不起作用

3 个答案: