gpt4 book ai didi

javascript - 如何将 jsfiddle.net 中的代码放入我的网站?

转载 作者:搜寻专家 更新时间:2023-10-31 08:21:54 24 4
gpt4 key购买 nike

我一直在尝试在我的网页底部创建一个小框,它会在滚动时展开/弹出,然后在鼠标移开时再次关闭。

我找到了这个 post带有指向 jsfiddle.net 的链接(我一直在摆弄它)并创建了一些在 JSFiddle 上查看时完全像我想要的东西。但是当我在我的网站上弹出它时我无法让它运行(我认为这可能与 onLoad 设置有关但我真的不确定)。

这是我在 JSFiddle 中创建的:

JavaScript

$('#box').hover(function() {
$(this).animate({
height: '220px'
}, 150);
}, function() {
$(this).animate({
height: '20px'
}, 500);
});

CSS

#box {
position: absolute;
width: 300px;
height: 20px;
left: 33%;
right: 33%;
min-width: 32%;
bottom: 0;
background-color: #000000;
}

HTML

<div id="box"></div>

这在 JSFiddle 中工作正常,但当我尝试将代码插入我的文件并将它们链接在一起时却不行。如果我将 JSFiddle 中的下拉框从 onLoadonDomReady 更改为其他任何内容,它将停止工作,但代码不会更改。所以我想我必须为此在某处添加其他内容。

正如您可能猜到的那样,在 JavaScript 方面我是一个完全的新手,所以我肯定我做错了什么。

有人可以告诉我如何保存 JavaScript 代码并将其链接到我的网页,以便它像在 JSFiddle 上一样工作吗?

最佳答案

您将立即运行此代码,而不是等待 DOM 准备就绪。这意味着 #box 元素可能还不存在。

jsFiddle 自动执行此过程,使您的代码更简洁。将代码放入自己的网站时需要自己动手。这非常简单:您只需将代码放入 a callback to the ready event on the document :

$(document).ready(function() {
// put your Javascript here
});

或者,一个快捷方式:

$(function(){
// put your Javascript here
});

这些在语义和功能上是等价的。

关于javascript - 如何将 jsfiddle.net 中的代码放入我的网站?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4936870/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com