0

我是 Javascript 的新手（和一般的编码）。我一直在尝试学习一些关于 Javascript 的 w3schools。我一直在尝试构建一个具有悬停效果的按钮，该按钮会在单击时下拉文本，并在再次单击时将其拉回。我试图将它放在我的一个页面上，这样我就可以为 SEO 提供一些文本，而不会让页面陷入困境。到目前为止，我已经想出了如何切换文本，但没有任何实际按钮或拖放效果的运气。任何帮助或建议将不胜感激。

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "Show Text";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "HIDE TEXT";
    }
} 
</script>

显示文本

文字在这里
4

1 回答 1

0

动画效果有两个主要选项 - CSS 过渡效果或用 JavaScript 编码的东西。

CSS 过渡：

您可以在 CSS 中添加过渡，这样如果元素的数值属性发生变化（例如高度、不透明度），浏览器就会对其进行动画处理，例如，如果您将高度从 0px 更改为 10px 并将过渡时间设置为 1 秒， 0.1 秒后将变为 1px，0.2 秒后将变为 2px，等等。您可以在此处阅读实现 CSS 过渡的详细信息：http: //www.w3schools.com/css3/css3_transitions.asp

JavaScript

您可以编写自己的自定义函数，但如果您在生活中制作不止一个动画，那么学习使用自定义 JavaScript 库（如 jQuery）可能更省时。您上面编写的整个函数可以重写为$('#ele').slideToggle();

与您的具体问题无关，您上面的方法对 SEO 无关紧要，因为 Google 不会看到您使用 JavaScript 添加的文本 - 据我了解，Google 可能也不太喜欢隐藏的文本。

于 2013-04-19T21:12:35.840 回答