Question

我想了解Google +的流项目边框左边是如何工作的？每个机构都可以解释它或建议任何链接和/或文章吗？

更多：当您专注于流时，您会看到流的左边框变为蓝色，当您关注另一个流时，边框将动画显示新的焦点项。

专注于元素a
a的左边框变为蓝色
专注于元素b
蓝色边框动画到元素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中的点击次数在所选帖子上添加蓝色边框。当发生单击时，突出显示类将从先前突出显示的项目中删除并添加到当前项目。该类将在您想要突出显示的一侧添加边框宽度/颜色/样式。

Google+喜欢边框

5 个答案: