2

sectiongotoが名前/ID 要素を識別するよう<a href="sectiongoto">Link</a>にフォーマットされたリンクをたどってジャンプした Web ページのセクションに、フェードイン/フェードアウトのハイライト色を設定したいと考えています。

これは、新しいメッセージがあることを示すスタック オーバーフローの受信トレイ リンクをクリックするのと同じように機能します。問題の投稿に移動/ジャンプすると、投稿の背景がオレンジ色にフェードインしてからフェードアウトします。

現在作業中のサイトにこの効果を実装するにはどうすればよいですか? 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内でフラグメント識別子を使用するという概念です。

ウィキペディアのエントリからの抜粋
*強調は私のものです

...フラグメント識別子は、別のプライマリリソースに従属するリソースを参照する短い文字列です。プライマリ リソースは Uniform Resource Identifier (URI) によって識別され、フラグメント識別子は従属リソースを指します。

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

したがって、ハッシュ値は#10036643URL の末尾にあります。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

Ok、

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
内で JavaScript を使用してdocument.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などのブラウザ依存の機能を使用する必要があります。
いくつかの代替案を回避することもできるかもしれません - これらの提案を使用して想像力を刺激することができます -

  • その要素のすべてのコンテンツの背後にあるわずかに透明な色の 1x1 ピクセルを繰り返し配置し、.fadeOut()関数を使用して特定の遅延後に非表示にします。

  • 背景画像をアニメーション化するbackground-position

  • おそらく、コールバックを使用していくつかの事前定義されたbackground-colorプロパティを循環しますsetInterval

于 2012-04-05T22:02:56.557 に答える