Google+喜歡邊框

Question

我想了解Google +的流項目邊框左邊是如何工作的？ 每個機構都可以解釋它或建議任何鏈接和/或文章嗎？

更多：當您關注流時，您會看到流的左邊界變為藍色，而當您關注另一個流時，邊框將動畫顯示新的焦點項。

1. 專注於元素a
2. 一個人的左邊界變成了藍色
3. 專注於元素b
4. 藍色邊框動畫到元素b的左邊界

感謝任何建議。

Answer 1

你去了： http ： //dev.pierre-cholhot.com/gplus-border.html

Answer 2

如果你不想使用jQuery並且只針對最新的瀏覽器，那就是一個。

演示： http ： //jsfiddle.net/ThinkingStiff/9UUb9/

HTML：

<div id="posts-frame">
    <div id="highlight"></div>
    <ul id="posts">
        <li class="post">post one</li>
        <li class="post">post two</li>
        <li class="post">post three</li>
        <li class="post">post four</li>
    <ul>
</div>

CSS：

#highlight {
    border-left: 1px solid #4D90F0;    
    height: 0;
    margin-left: 1px;
    position: absolute;
    top: 0;
    transition:             top 200ms ease, height 200ms ease;
        -moz-transition:    top 200ms ease, height 200ms ease;
        -ms-transition:     top 200ms ease, height 200ms ease;
        -o-transition:      top 200ms ease, height 200ms ease;
        -webkit-transition: top 200ms ease, height 200ms ease;
}

.post {
    border: 1px solid lightgray;
    display: block;
    height: 45px;
    padding-left: 4px;
}

.post:nth-child( 2 ) {
    height: 70px;    
}

#posts {
    padding: 0;
    margin: 0;  
    width: 400px;
}

#posts-frame {
    position: relative;       
}

腳本：

function selectPost( event ) {

    var highlight = document.getElementById( 'highlight' );
    highlight.style.height = event.target.clientHeight + 'px';
    highlight.style.top = ( event.target.offsetTop + 1 ) + 'px';

};

document.getElementById( 'posts' ).addEventListener( 'click', selectPost, false);

Answer 3

如果查看HTML和CSS代碼，您將看到hr CSS類定義了藍色邊框。 當您單擊特定的流發布時，JavaScript會將hr類添加到此<div> 。 這是有趣的部分。 當你點擊另一個<div>很少會發生：

• hr類將從之前的流帖子中刪除
• 一個新的<div>將添加到頁面底部，它看起來像這樣：

<div class="rh kA" style="left: 0px, top: 73px, width: 572px, height: 318px;"></div>

• 所以這個新創建的div標簽將具有前一個... em ... div的位置和大小。
• 現在可以控制JavaScript，更改top CSS屬性，直到它匹配當前點擊的帖子的位置。 div的高度也改變了。 這部分為您提供“動畫”。
• hr類現在被添加到新的（點擊的）流帖子中。
• 負責動畫的div將從DOM（或隱藏）中刪除。

當然這一切都可能是錯的，我只是在玩Firebug一段時間就知道了，所以我建議你:)

Answer 4

這可能是使用CSS轉換和：focus偽類。

Answer 5

Google+會通過偵聽外部div中的點擊次數在所選帖子上添加藍色邊框。 當發生單擊時，突出顯示類將從先前突出顯示的項目中刪除並添加到當前項目。 該類將為要突出顯示的邊添加邊框寬度/顏色/樣式。