2

我想为网页的一部分设置淡入/淡出突出显示颜色，该部分跳转到以下格式的链接<a href="sectiongoto">Link</a>，其中sectiongoto标识名称/ID 元素。

这与单击指示您有新消息的 Stack Overflow 收件箱链接的方式相同。当您导航/跳转到相关帖子时，帖子的背景会以橙色色调淡入，然后淡出。

如何在我目前正在开发的网站上实现这种效果？我使用 Firebug 查看了 SO 页面的源代码，但没有看到任何链接。

4

2 回答 2

4

您可能正在寻找 :target 伪类

我还没有看过 SO 脚本，但我相当肯定淡入淡出是 JavaScript 的事情。它可以通过 CSS 过渡来完成，但这通常用于诸如悬停/焦点的淡入和淡出颜色之类的事情。

http://www.w3.org/TR/selectors/#target-pseudo

http://caniuse.com/#search=target

假设您有这样的示例标记

<ul>
  <li><a href="#target1">Go To 1</a></li>
  <li><a href="#target2">Go To 2</a></li>
</ul>
<div id="target1"><!--Your HTML Here --></div>
<div id="target2"><!--Your HTML Here --></div>

然后你想要这样的 CSS

div:target { background-color:orange; }

这样当您的用户单击列表中的链接时，您的 url 将采用哈希码 #target1 或 #target2，并且页面中适用的目标现在具有橙色背景色。

于 2012-04-04T19:53:40.167 回答
1

所以..您需要查看的是在 URL中使用片段标识符的概念。

维基百科条目的摘录
*强调是我的

...片段标识符是一个短字符串，它指的是从属于另一个主要资源的资源。主要资源由统一资源标识符 (URI) 标识，片段标识符指向从属资源。

我更喜欢称它为 URL 哈希标签，因为在 JavaScript 中用于检索它们的方法是
window.location.hash. 随心所欲地称呼它-这是解释：

让我们以我的答案的 URL 为例：
啊哈！但是在发布之前我是如何获得 URL 的？;)

https://stackoverflow.com/questions/10017592/highlighting-a-section-of-a-web-page-the-way-so-does-with-inbox-links/10036643#10036643

所以哈希值#10036643在 URL 的末尾。您可以通过检查window.location.hash变量来获得该值。可以使用相同的语法将元素添加到哈希列表 -
window.location.hash += "#more_info"

可以轻松创建多个键值对来存储更多信息：
http://foobar.com/#one=1#two=2#three=3

window.location.hash现在将给我们： #one=1#two=2#three=3
从那里我们可以简单地使用以字符作为分隔符的.split()函数。#那应该给你这样的东西：

["", "one=1", "two=2", "three=3"]

从数组中弹出第一个空元素，然后对于每个键/值对，您可以做一个额外的.split('=')或者干脆不使用键作为值，只需要像这样的哈希值：
http://foobar.com/post/how-to/#COMMENT_ID

好的，

现在我们知道如何将信息嵌入到 URL 中，我们可以开始解析它了。为了这个例子，我们假设一个简单的 HTML 结构像这样 -

...
<body>
  <div>
    Page Header
  </div>
  <div class="blog_post">
    An interesting section of content.
    <div class="comment cid0" ></div>
  </div>
  <div class="blog_post">
    More fantastic information (and a special offer).
    <div class="comment cid0" ></div>
    <div class="comment cid1" ></div>
  </div>
  <div>
    Page Footer
  </div>
</body>
...

鉴于此 URL： http://foobar.com/post/how-to/#cid1
您可以在函数中使用一些 JavaScriptdocument.ready来控制在哪里绘制焦点 -

$(function(){
  // Extract comment id from URL
  var targetElementId = window.location.hash.split("#")[1]; // This gives us 456
  var targetElement = $(".comment ."+targetElementId);
  var targetElementOffset = targetElement.offset(); 
  $('body').scrollTop(targetElementOffset.top);

  // Insert highlight functionality here
});

关于突出显示，我认为Kerian 的回答几乎涵盖了它 - 您需要使用一些依赖于浏览器的功能，例如CSS Transitions。
您也许还可以摆脱一些替代方案-您可以使用这些建议来激发您的想象力-

  • 在该元素的所有内容后面放置一个重复的 1x1px 略微透明的颜色，并.fadeOut()在一定延迟后简单地使用该功能将其隐藏。

  • 动画背景图像background-position

  • 也许通过回调循环通过一些预定义background-color的属性setInterval

于 2012-04-05T22:02:56.557 回答