[英]Google+ like border
I want to understand how Google+'s stream items border-left works? 我想了解Google +的流项目边框左边是如何工作的? Can every body explain it or suggest any link and/or article?
每个机构都可以解释它或建议任何链接和/或文章吗?
More: When you focus on a stream, you'll see that the left-border of stream gone to blue, and when you focus on another stream, the border will animate to new focused item. 更多:当您关注流时,您会看到流的左边界变为蓝色,而当您关注另一个流时,边框将动画显示新的焦点项。
Thanks to any suggestion. 感谢任何建议。
Here's one if you don't want to use jQuery and only target the latest browsers. 如果你不想使用jQuery并且只针对最新的浏览器,那就是一个。
Demo: http://jsfiddle.net/ThinkingStiff/9UUb9/ 演示: http : //jsfiddle.net/ThinkingStiff/9UUb9/
HTML: 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: 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;
}
Script: 脚本:
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);
If you look at HTML and CSS code, you will see that blue border is defined by hr
CSS class. 如果查看HTML和CSS代码,您将看到
hr
CSS类定义了蓝色边框。 When you click specific stream post, JavaScript will add hr
class to this <div>
. 当您单击特定的流发布时,JavaScript会将
hr
类添加到此<div>
。 Here comes the fun part. 这是有趣的部分。 When you click on another
<div>
few things will happen: 当你点击另一个
<div>
很少会发生:
hr
class will be removed from previous stream post hr
类将从之前的流帖子中删除 <div>
will added to the bottom of a page, it looks like this: <div>
将添加到页面底部,它看起来像这样: <div class="rh kA" style="left: 0px, top: 73px, width: 572px, height: 318px;"></div>
top
CSS property, until it will match position of currently clicked post. top
CSS属性,直到它匹配当前点击的帖子的位置。 The height of div is also changed. hr
class is now added to new (clicked) stream post. hr
类现在被添加到新的(点击的)流帖子中。 Of course this all may be wrong, I just know it from playing with Firebug for a while, and so I advise it to you :) 当然这一切都可能是错的,我只是在玩Firebug一段时间就知道了,所以我建议你:)
这可能是使用CSS转换和:focus伪类。
Google+ adds the blue border on selected posts by listening for clicks within the outer div. Google+会通过侦听外部div中的点击次数在所选帖子上添加蓝色边框。 When a click happens the highlight class is removed from the previously highlighted item and added to the current item.
当发生单击时,突出显示类将从先前突出显示的项目中删除并添加到当前项目。 The class will add a border width/color/style to the side you want highlighted.
该类将为要突出显示的边添加边框宽度/颜色/样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.