实现google reader中的post自动聚焦(auto foucs) http://www.javaeye.com/topic/87379

在这篇文章中http://www.javaeye.com/topic/83932, 我想讨论下google reader的这个功能是怎样实现的。

经过这几天的摸索，和同事的帮助。公司的rss reader已经基本实现了google reader的这种items的模式。

实现了点击某个item时会把这个item移到最顶端。

基本的思想还是通过子div的offsetTop 和父div的scrollTop 计算出最近的一个div。

以下和附件都是源码。

代码

<html>
<head>
<style type="text/css">
body{
margin:0px 30px 0px 30px;
}
#ttt{
overflow:auto;
height: 600px;
}
.noselect{
width:450px;
margin:5px;
border:solid 1px #666666;
background-color:#ffffff;
}
.selected{
width:450px;
margin:5px;
border:solid 1px #666666;
background-color:#cc0000;
}
</style>
<script type="text/javascript">
function clearAllSelection(){
var posts = document.getElementsByName("item");
for(var i=0; i<posts.length;i++){
if(posts[i].nodeType == "1" && posts[i].tagName.toLowerCase() == "div"){
posts[i].className = "noselect";
}
}
}
function makeTheElementAsCurrentElement(element){
element.className = "selected";
}
function windowOnload(){
var itemBody = document.getElementById("ttt");
itemBody.onscroll = function(){
var currentItem = getCurrentPostItem();
if (currentItem != null){
clearAllSelection();
makeTheElementAsCurrentElement(currentItem);
//markReadIfNess(currentItem);
}
};
connectOnclickEventToPostDiv();
}
function connectOnclickEventToPostDiv(){
var items = document.getElementsByName("item");
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
clearAllSelection();
makeTheElementAsCurrentElement(this);
//markReadIfNess(this);
//move the current item to the top..
document.getElementById("ttt").scrollTop = this.offsetTop;
//this.scrollTo(0, 0);
};
}
}
var previousPostItem = null;
function getCurrentPostItem(){
var itemBody = document.getElementById("ttt");
var items = document.getElementsByName("item");
var tmp=10000;
var nearestElement = null;
for(var i=0;i<items.length;i++){
if (items[i].nodeType == "1" && items[i].tagName.toLowerCase() == "div"){
var x = items[i].offsetTop - itemBody.scrollTop;
if (Math.abs(x) < tmp){
tmp=Math.abs(x);
nearestElement = items[i];
}
}
}
if (previousPostItem == null){
previousPostItem = nearestElement;
return nearestElement;
}else if (previousPostItem != nearestElement){
previousPostItem = nearestElement
return nearestElement
}else{
return previousPostItem;
}
}
</script>
</head>
<body onload="windowOnload();">
<div id="ttt">
<div id="item" name="item" class="noselect">1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">2 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">3 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">4 1 1 1v</div>
<div id="item" name="item" class="noselect">5 1 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">6 1 1 1 1</div>
<div id="item" name="item" class="noselect">7 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">8 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">9 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">10 1 1 1 1</div>
<div id="item" name="item" class="noselect">11 1 1 1 1 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">12 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">13 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">14 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">15 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1</div>
<div id="item" name="item" class="noselect">16 1 1 1 1 1 1 1 1 1 1 1 1 1</div>
</div>
</body>
</html>

scorll.htm.zip
描述:		下载
文件名:	scorll.htm.zip
文件大小:	1 KB
下载过的:	文件被下载或查看43 次

声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。

相关文章：关于JavaScript的貌似类（pseudo-classes）－－－－不吐不快 css-dock-menu 超漂亮的仿MAC的菜单-本人收藏

实现google reader中的post自动聚焦(auto foucs) http://www.javaeye.com/topic/87379相关推荐

基于Google Reader的个人知识管理方案
来源月光博客:http://www.williamlong.info/archives/2172.html. 先前我写的<基于Dropbox的个人知识管理平台>讲述了使用Dropbox在个 ...
转贴：Google Reader：信息背后的信息，无可替代的伟大
转贴:Google Reader:信息背后的信息,无可替代的伟大 Google宣布将于7月1日关闭Google Reader!尽管是情理之中,甚至也有几次先召,但正式消息来临,依然引发了前所未有的关注 ...
告别 Google Reader，告别一个时代！
告别 Google Reader,告别一个时代! 作者: 善用佳软北京时间7月2日15:00, Google Reader 正式关闭!重发旧文,作为纪念.以下文章原发于2013年4月期 @CHIP ...
google reader 和抓虾
每天晚上8.9点时我一般会看看自己收集的各种blog,本来一直使用google reader的聚集服务,今天兴起,看了看 zhuaxia的blog聚集服务,觉得很不错.主要是快,另外各种独特的信息服务 ...
红星加星红加星红等于爱星星_如何从Google Reader导出已加星标的项目
红星加星红加星红等于爱星星 If your reaction to the announced demise of Google Reader was to scream "But my s ...
基于Google Reader发展起来的个性化推荐系统之三大问题
郑昀@玩聚SR 20091003 中科院的xlvector(即项亮,他所在的团队The Ensemble在7月份获得Netflix大奖赛公开测试排名第一,但在9月22日Netflix宣布BPC获胜,原 ...
Google Reader 干掉了 RSS！
"Google Reader 扼杀了一代人对于构建托管的社交阅读器的尝试." 作者 | Dan McKinley 译者 | 弯月,责编 | 郭芮出品 | CSDN(ID:CSDN ...
如何在Google表格中直接使用Google翻译
Google Translate lets you translate words or phrases from one language to another, but did you know ...
Google Reader为什么会关闭
摘要:Google Reader做为一款RSS阅读器,追求的是干净.纯粹的阅读体验,可以让用户高效.快速的获得优质的阅读体验,其订阅功能还可以实现个性化阅读,让用户只关注自己感兴趣的内容,有利于专注和 ...

实现google reader中的post自动聚焦(auto foucs) http://www.javaeye.com/topic/87379

实现google reader中的post自动聚焦(auto foucs) http://www.javaeye.com/topic/87379相关推荐

最新文章

热门文章