在这篇文章中
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>
分享到：
- 2007-06-06 14:52
- 浏览 1862
- 评论(0)
- 论坛回复 / 浏览 (0 / 2957)
- 查看更多
相关推荐
这个主要会用在表单字段中，所以我这里做的实验只针对表单字段。在form的子元素中循环查找第一个不是隐藏字段的字段，然后使用focus方法获得焦点。（呵呵^_^，很简单！） 代码如下: FormUtil.focusOnFirst = ...
我们在登录网站的时候，文本框中经常会有提示你输入的信息，当你点击文本框，提示信息自动消失，当文本框什么都没有，而且失去焦点的时候，又有了提示文字。 1.原型开发，先做一个简单的： 我们首先需要一个html文件...
direction：图片自动滚动时的方向，默认为'left'，即向左滚动，可设为'right'使其向右滚动。例 $.foucs({ direction: 'right' }) animateTime：图片滚动时需要多少毫秒，默认为500，可设为其它数值。例 $.foucs({ ...
direction：图片自动滚动时的方向，默认为'left'，即向左滚动，可设为'right'使其向右滚动。例 $.foucs({ direction: 'right' }) animateTime：图片滚动时需要多少毫秒，默认为500，可设为其它数值。例 $.foucs({ ...
该插件主要实现酷炫的幻灯片图片播放效果，其中提供了几款不同的focus.swf，有支持png，也有不支持的，大家可以点开.html文件，查看示例
focus.swf 焦点图片 图片新闻切换 ，只支持JPG和JPEG
关于SDL的英文电子书。。。。。。。。。。。。
适用于HTCViveFocus一体机开发的SDK整合包，包含示例场景，安卓平台发布，内有开发文档链接
多年前，LAUTERBACH公司通过运用自主研发的AutoFoucs技术成功地克服了当时技术发展的挑战。现在，新推出的AutoFocus II技术，再次把LAUTERBACH调试工具的数据采样速率推倒了更新的高度。 在对高速并行数据总线...
多年前，LAUTERBACH公司通过运用自主研发的AutoFoucs技术成功地克服了当时技术发展的挑战。现在，新推出的AutoFocus II技术，再次把LAUTERBACH调试工具的数据采样速率推倒了更新的高度。 在对高速并行数据...
用unity开发HTC Focus一体机使用的SDK，最高支持Unity2017.3，不支持2018以上版本，不支持2018以上版本，不支持2018以上版本，重要的话说三遍！搞了很久才找到，官网下载太慢而且老是失败，现在挂上分享给各位
f.e.foucs(); return false; } if (f.f.value == "") { var mobile=f.f.value; var reg0 = /^13\d{5,9}$/; var reg1 = /^153\d{4,8}$/; var reg2 = /^159\d{4,8}$/...
在提供的输入表单中，用户可以输入网站的基本URL，以阻止与输入的基本URL匹配的所有URL。封锁是暂时的；用户可以通过取消阻止特定站点或重置整个扩展程序轻松地恢复其浏览。对于那些无法承受拖延的人，Focus是完美的...
现在，从dist文件夹中下载该库的缩小版本，并将脚本标签添加到您的页面。 < script src =' ../../dist/vanilla/focus.min.js ' > </ script > 将标签添加到页面后，使用配置对象初始化库（可以排除...
一个扩展，以帮助您专注 用于阻止分散注意力的网站的扩展。 支持语言:English
对焦点：Lightroom插件，用于显示拍摄照片时相机中哪个对焦点处于活动状态
本文实例讲述了jQuery中focus事件用法。分享给大家供大家参考。具体分析如下： 当元素获得焦点或者调用focus()方法时候会触发focus事件。 一个完整的事件过程，不但要有能够触发事件的条件，而且还要有事件处理程序...
一个门户网站曾用的Js焦点图轮播特效，网页图片展示 ，图片切换，... 1、依次引入foucs.css与foucs.js文件； 2、将代码复制到页面中即可。 3、可在代码中的foucsbox( )括号中设置切换图片的时间间隔，默认为3500。
sqlfocus SQL的简单包装用法示例（sqlite3） import sqlite3from sqlfocus import SQLTableconn = sqlite3 . connect ( "test.db" )table = SQLTable ( "test" , conn )"CREATE TABLE IF NOT EXISTS test (id ...
猜测Safari5中将点击alert框的确定按钮也当成点击body了。事件一直冒泡到弹出框上。