如何将jsfiddle.net的代码放入我的网站？ [英] How do I put codes from jsfiddle.net into my website?

问题描述

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

I’ve been trying to create a little box at the bottom of my webpage which will expand / pop-up when scrolled over and then close again when the mouse moves away.

我发现这个 post 与jsfiddle.net（我一直在讨论）的链接，并创建了一些工作，就像我想要的，当在JSFiddle上查看。但是当我在我的网站上弹出时，我无法运行它（我认为这可能与 onLoad 设置有关，但我真的不确定）

I found this post with a link to jsfiddle.net (which I have been fiddling about with) and have created something that works exactly like I want when viewed on JSFiddle. But I can’t get it to run when I pop it on my website (I think it may have something to do with the onLoad setting but I’m really not sure).

这是我在JSFiddle中创建的：

This is what I have created in JSFiddle:

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

CSS

CSS

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

HTML

HTML

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

这在JSFiddle中工作正常，但是当我尝试将代码插入到我的文件中并链接在一起。如果我将JSFiddle中的下拉框从 onLoad 或 onDomReady 更改为其他任何东西，它将停止工作，但代码不改变所以我想我必须在那里添加一些东西。

This works fine in JSFiddle but not when I try and insert the code into my files and link them together. If I change the drop down box in JSFiddle from onLoad or onDomReady to anything else, it stops working, but the code doesn’t change. So I think I have to add something else somewhere for that.

正如你可能猜到的那样，对于JavaScript来说，我是一个完整的新手，所以我很肯定我没有做正确的事情。

As you can probably guess, I am a complete novice when it comes to JavaScript so I’m positive that I’m not doing something right.

有人可以告诉我如何保存JavaScript代码并将其链接到我的网页，以便它能正常工作在JSFiddle ？

Could someone please tell me how to save the JavaScript code and link it to my webpage so it will work exactly like it is on JSFiddle?

推荐答案

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

You are running this code immediately, rather than waiting for the DOM to be ready. This means that the element #box may not exist yet.

jsFiddle自动化此过程，使您的代码更清洁。当您将代码放入自己的网站时，您需要自己做。这很简单：您只需将代码放入回调就绪文件code>

jsFiddle automates this process to make your code cleaner. You need to do it yourself when you put the code into your own website. It is very easy: you just need to put your code into a callback to the ready event on the document:

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

或快捷方式版本：

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

这些语义和功能相当。

这篇关于如何将jsfiddle.net的代码放入我的网站？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！