`
dengyin2000
  • 浏览: 1225547 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

    博客分类：
  • ajax
Google 
阅读更多
在这篇文章中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>
分享到：
| Google Reader中的auto mark reader是怎样 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript聚焦于第一个字段的代码

    `：当找到第一个非隐藏字段时，调用其`focus`方法，使得浏览器自动将光标放置在这个字段内，用户可以直接开始输入。 6. `return;`：一旦找到了第一个非隐藏字段并赋予了焦点，函数立即结束，防止继续遍历剩余的表单...

    focus.swf幻灯片插件

    《聚焦幻灯片插件——focus.swf的详解与应用》 在网页设计中，吸引用户的注意力至关重要，而幻灯片展示就是一种有效的手段。本文将深入探讨一款名为"focus.swf"的幻灯片插件，它以其酷炫的播放效果和灵活的配置选项...

    focus.swf 焦点图片

    "focus.swf"正是利用Flash的这一特性，创建了一个能够自动循环播放图片，且支持用户交互的组件。 该系统主要由两部分组成：前端的Flash动画（focus.swf）和后端的JavaScript脚本（focusflash.js）。Flash动画负责...

    VC自绘CComboBox实现ComboBox的换肤

    3. **创建自定义控件类**：为了实现自绘，你需要创建一个继承自CComboBox的自定义类，然后在新类中覆盖上述两个函数。同时，可能还需要重载其他消息处理函数，如On_WM_CTLCOLOR_MSG()，用于改变控件的背景颜色。 4....

    用jquery实现输入框获取焦点消失文字

    我们在登录网站的时候，文本框中经常会有提示你输入的信息，当你点击文本框，提示信息自动消失，当文本框什么都没有，而且失去焦点的时候，又有了提示文字。 1.原型开发，先做一个简单的： 我们首先需要一个html文件...

    100%自适应左右切换jQuery焦点图代码

    direction：图片自动滚动时的方向，默认为'left'，即向左滚动，可设为'right'使其向右滚动。例 $.foucs({ direction: 'right' }) animateTime：图片滚动时需要多少毫秒，默认为500，可设为其它数值。例 $.foucs({ ...

    Focus on SDL

    《聚焦SDL：深入理解SDL图形用户界面》 一、引言 在计算机科学与软件开发领域，SDL（Simple DirectMedia Layer）是一个强大的跨平台多媒体框架，用于开发高性能的游戏和其他多媒体应用。它为开发者提供了访问硬件...

    宽屏自适应左右切换jQuery焦点图

    direction：图片自动滚动时的方向，默认为'left'，即向左滚动，可设为'right'使其向右滚动。例 $.foucs({ direction: 'right' }) animateTime：图片滚动时需要多少毫秒，默认为500，可设为其它数值。例 $.foucs({ ...

    HTC Vive Focus PlusVR一体机开发工具SDK

    本篇文章将深入探讨这个SDK，以及它如何助力Unity平台上的VR应用开发。 首先，HTC Vive Focus Plus VR一体机开发工具SDK是专为这个设备量身定制的软件开发套件，它包含了丰富的资源和工具，使得开发者能够创建和...

    javajsp实现了js验证表单

    ### Java JSP 实现 JS 表单验证 在本文中，我们将探讨如何使用 JavaScript 在 Java JSP 页面上实现表单验证。此示例代码通过多种正则表达式和条件判断来确保用户输入的数据符合特定的标准。 #### 标题解读：Java ...

    UFT14.52下载地址.zip

    【UFT14.52】是HP公司（现已被Micro Focus收购）推出的自动化功能测试工具，全称为Unified Functional Testing，之前被称为QuickTest Professional（QTP）。这个版本的UFT是一个强大的软件测试解决方案，专为功能...

    2011年考研英语完型填空(冲刺班)录音脚本.pdf

    1. **文章布局结构**：考研英语完型文章往往有明确的中心主线，包含一个鲜明的主题（FOUCS），作者的观点或导向性较强。理解文章的中心主线是掌握全文的关键。文章常采用总分对照结构，总述部分概述主题，分述部分对...

    带缩略图的幻灯效果

    代码片段中的JavaScript函数实现了幻灯片自动切换和缩略图导航功能： - **`initAutoFocus()`**: 初始化自动轮播功能。 - **`autoShiftFocus()`**: 核心函数，接收参数包括缩略图容器ID、缩略图标签名、内容容器ID和...

    对焦点：Lightroom插件，用于显示拍摄照片时相机中哪个对焦点处于活动状态

    标题中的“对焦点：Lightroom插件，用于显示拍摄照片时相机中哪个对焦点处于活动状态”揭示了一个针对Adobe Lightroom软件的特定插件功能。这个插件的主要目的是帮助摄影师在后期处理过程中更好地理解并利用他们在...

    Web前端开发经典面试题（附参考答案）

    - 在 CSS 中，没有 `center` 这样的属性名，但是可以使用 `margin: auto` 来实现水平居中。 - `center-block` 是 Bootstrap 中的一个类名，用于使元素在其父容器中水平居中。 - `horizontal-center` 和 `vertical...

    jQuery中focus事件用法实例

    总的来说，`focus`事件在jQuery中是用于响应元素获取焦点时执行的操作，通过`.focus()`方法绑定事件处理函数，可以实现诸如高亮、提示等交互效果，提升用户的操作体验。在实际项目中，根据需求合理利用`focus`事件及...

    LAUTERBACH推出集成AutoFocusII技术的ARM-ETM预处理器

    多年前，LAUTERBACH公司通过运用自主研发的AutoFoucs技术成功地克服了当时技术发展的挑战。现在，新推出的AutoFocus II技术，再次把LAUTERBACH调试工具的数据采样速率推倒了更新的高度。   　在对高速并行数据...

    js focus不起作用的解决方法(主要是因为dom元素是否加载完成)

    这通常用于将用户的输入焦点引导到某个表单字段或可聚焦的DOM元素上。然而，在实际开发过程中，有时会遇到`focus()`方法不起作用的情况，尤其是在页面元素尚未完全加载的情况下。 #### 一、问题背景与分析 根据...

    Unity开发HTCFocus一体机SDK

    用unity开发HTC Focus一体机使用的SDK，最高支持Unity2017.3，不支持2018以上版本，不支持2018以上版本，不支持2018以上版本，重要的话说三遍！搞了很久才找到，官网下载太慢而且老是失败，现在挂上分享给各位

    焦点 - 网站拦截器「Focus - Website Blocker」-crx插件

    在提供的输入表单中，用户可以输入网站的基本URL，以阻止与输入的基本URL匹配的所有URL。封锁是暂时的；用户可以通过取消阻止特定站点或重置整个扩展程序轻松地恢复其浏览。对于那些无法承受拖延的人，Focus是完美的...

Magicbox
Global site tag (gtag.js) - Google Analytics