2007-06-06

实现google reader中的post自动聚焦(auto foucs), 当你浏览文章时。

关键字: google-reader
在这篇文章中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<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">2<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">3<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">4<br/>1<br/>1<br/>1v</div>
	<div id="item" name="item" class="noselect">5<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">6<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">7<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">8<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">9<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">10<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">11<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item"  name="item" class="noselect">12<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">13<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">14<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">15<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
	<div id="item" name="item" class="noselect">16<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
</div>

</body>
</html>
评论
dengyin2000
搜索本博客
我的相册
4d063000-8eef-365d-8346-f210ccfd5265-thumb
VB-seamless
共 13 张
存档
最新评论