实现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。

以下和附件都是源码。

 

代码
  1. <html>  
  2. <head>  
  3. <style type="text/css">  
  4. body{   
  5.     margin:0px 30px 0px 30px;   
  6. }   
  7. #ttt{   
  8.     overflow:auto;   
  9.     height: 600px;   
  10. }   
  11. .noselect{   
  12.     width:450px;   
  13.     margin:5px;   
  14.     border:solid 1px #666666;   
  15.     background-color:#ffffff;   
  16. }   
  17. .selected{   
  18.     width:450px;   
  19.     margin:5px;   
  20.     border:solid 1px #666666;   
  21.     background-color:#cc0000;   
  22. }   
  23. </style>  
  24. <script type="text/javascript">  
  25. function clearAllSelection(){   
  26.     var posts = document.getElementsByName("item");   
  27.     for(var i=0; i<posts.length;i++){   
  28.         if(posts[i].nodeType == "1" && posts[i].tagName.toLowerCase() == "div"){   
  29.                 posts[i].className = "noselect";   
  30.         }   
  31.     }   
  32. }   
  33.   
  34. function makeTheElementAsCurrentElement(element){   
  35.     element.className = "selected";   
  36.        
  37. }   
  38.   
  39. function windowOnload(){   
  40.     var itemBody = document.getElementById("ttt");   
  41.     itemBody.onscroll = function(){   
  42.             var currentItem = getCurrentPostItem();   
  43.             if (currentItem != null){   
  44.                 clearAllSelection();   
  45.                 makeTheElementAsCurrentElement(currentItem);   
  46.                 //markReadIfNess(currentItem);   
  47.             }   
  48.     };   
  49.     connectOnclickEventToPostDiv();   
  50. }   
  51.   
  52. function connectOnclickEventToPostDiv(){   
  53.         var items = document.getElementsByName("item");   
  54.         for(var i=0;i<items.length;i++){   
  55.             items[i].onclick=function(){   
  56.                 clearAllSelection();   
  57.                 makeTheElementAsCurrentElement(this);   
  58.                 //markReadIfNess(this);   
  59.                    
  60.                 //move the current item to the top..   
  61.                 document.getElementById("ttt").scrollTop = this.offsetTop;   
  62.                 //this.scrollTo(0, 0);   
  63.             };   
  64.         }   
  65.   
  66. }   
  67.   
  68. var previousPostItem = null;   
  69.   
  70. function getCurrentPostItem(){   
  71.     var itemBody = document.getElementById("ttt");   
  72.     var items = document.getElementsByName("item");   
  73.     var tmp=10000;   
  74.     var nearestElement = null;   
  75.     for(var i=0;i<items.length;i++){   
  76.         if (items[i].nodeType == "1" && items[i].tagName.toLowerCase() == "div"){   
  77.             var x = items[i].offsetTop - itemBody.scrollTop;   
  78.             if (Math.abs(x) < tmp){   
  79.                 tmp=Math.abs(x);   
  80.                 nearestElement = items[i];   
  81.             }   
  82.   
  83.         }   
  84.     }   
  85.        
  86.     if (previousPostItem == null){   
  87.          previousPostItem = nearestElement;   
  88.         return nearestElement;   
  89.     }else if (previousPostItem != nearestElement){   
  90.          previousPostItem = nearestElement         
  91.          return nearestElement   
  92.     }else{   
  93.         return previousPostItem;   
  94.     }   
  95. }   
  96. </script>  
  97. </head>  
  98.   
  99. <body onload="windowOnload();">  
  100. <div id="ttt">  
  101.     <div id="item" name="item" class="noselect">1<br/>1<br/>1<br/>1<br/>1<br/>1</div>  
  102.     <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>  
  103.     <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>  
  104.     <div id="item" name="item" class="noselect">4<br/>1<br/>1<br/>1v</div>  
  105.     <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>  
  106.     <div id="item" name="item" class="noselect">6<br/>1<br/>1<br/>1<br/>1</div>  
  107.     <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>  
  108.     <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>  
  109.     <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>  
  110.     <div id="item" name="item" class="noselect">10<br/>1<br/>1<br/>1<br/>1</div>  
  111.     <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>  
  112.     <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>  
  113.     <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>  
  114.     <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>  
  115.     <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>  
  116.     <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>  
  117. </div>  
  118.   
  119. </body>  
  120. </html>  
  121.   
<script type="text/javascript">render_code();</script>

 

scorll.htm.zip
 描述: 
下载
 文件名: scorll.htm.zip
 文件大小: 1 KB
 下载过的: 文件被下载或查看43 次
声明:JavaEye文章版权属于作者,受法律保护。没有作者书面许可不得转载。

相关文章:    关于JavaScript的 貌似类(pseudo-classes)----不吐不快    css-dock-menu 超漂亮的仿MAC的菜单-本人收藏 
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值