浏览 2970 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2007-06-06
http://www.iteye.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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |