在这篇文章中[url]http://www.iteye.com/topic/83932[/url], 我想讨论下google reader的这个功能是怎样实现的。
经过这几天的摸索,和同事的帮助。公司的rss reader已经基本实现了google reader的这种items的模式。
实现了点击某个item时会把这个item移到最顶端。
基本的思想还是通过子div的offsetTop 和 父div的scrollTop 计算出最近的一个div。
以下和附件都是源码。
[code]
<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].οnclick=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 οnlοad="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>
[/code]
经过这几天的摸索,和同事的帮助。公司的rss reader已经基本实现了google reader的这种items的模式。
实现了点击某个item时会把这个item移到最顶端。
基本的思想还是通过子div的offsetTop 和 父div的scrollTop 计算出最近的一个div。
以下和附件都是源码。
[code]
<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].οnclick=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 οnlοad="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>
[/code]