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中的点击次数在所选帖子上添加蓝色边框。 当发生单击时，突出显示类将从先前突出显示的项目中删除并添加到当前项目。 该类将为要突出显示的边添加边框宽度/颜色/样式。