1

当您单击主菜单链接时，此网站会发生什么样的转换（如果是转换）？

http://ivalladare7.wix.com/testepi#!home/mainPage

这只是一个测试，但我认为这个想法很清楚。是 HTML5、CSS 还是 jQuery/JavaScript？

我在几个地方看到了它，但我不知道如何实现它，因为我不知道如何找到一个例子。

任何帮助表示赞赏

4

4 回答 4

1

这是一个 CSS 过渡（不是一个很好的过渡，因为它只是 webkit）。带有供应商前缀的更好版本是：

.menu a {
    color: #999;
            transition: color 0.4s ease; /* vendorless fallback */
         -o-transition: color 0.4s ease; /* opera */
        -ms-transition: color 0.4s ease; /* IE 10 */
       -moz-transition: color 0.4s ease; /* Firefox */
    -webkit-transition: color 0.4s ease; /*safari and chrome */
}

.menu a:hover {
    color: #340065;
}

如果您的意思是滑动内容，那就是Javascript。

于 2012-10-18T10:42:50.587 回答
1

HTML 结构乍一看有点令人生畏。我不确定您是指哪个过渡（？），但我认为当我们单击菜单时它是滑动内容。

起初我怀疑它是某种 Javascript（最有可能是 jQuery），因为它在地址栏中的站点 URL 中添加了路径。然后我尝试查看源代码（使用 Chrome 的检查元素），发现<a>菜单上没有元素。我只发现了这个：

<p skinpart="label" class="wysiwyg_viewer_skins_dropmenubutton_TextOnlyMenuButtonNSkinddm1-label" style="line-height: 25px; width: auto; ">Articles&nbsp;&amp;&nbsp;Videos</p>

然后为了确保这一点，我在浏览器上禁用了 Javascript。滑动内容停止工作。所以，是的，它是Javascript。

编辑：

实际上，如果您尝试直接查看源代码 (Ctrl+U)，您会发现一堆 Javascript 行。如果您尝试 Ctrl+F 文本Home，您会在 Javascript 行中找到它。所以这确实是一个JS。

于 2012-10-18T10:48:31.193 回答
0

这似乎是一个 CSS 过渡。

如果您看到规则：

.wysiwyg_viewer_skins_dropmenubutton_TextOnlyMenuButtonNSkinddm1 {
-webkit-transition: color 0.4s ease 0s;
}

但是您可以在以下位置获得更好的东西：http ://css3generator.com/

选择过渡并使用该工具。它将帮助您获得更多跨浏览器的东西。

于 2012-10-18T10:41:48.430 回答
0

本网站上的简单过渡是使用 css3 过渡完成的。然而，内容转换的滑动是使用 TweenMax (Greensock) 进行的

这是一个轻量级的脚本，可以完美地与 jQuery 或 vanilla js 一起工作，特别是用于补间/动画。

查看他们的演示（使用 Greensock 制作动画）

https://greensock.com/jump-start-js

于 2017-07-27T10:40:42.290 回答