溜达详情展示机制

先在页面里加入一个属性为不可见的DIV集合，该集合中包含了所有溜达详情的内容；然后通过相对于溜达列表的绝对定位来调整详情的位置，以使溜达详情能与列表中相应的溜达对应。detailsVisible用于侦听溜达详情在页面中是否可见，如果可见则采用动画滑动的方式展示相应的溜达，如果不可见则直接调整为可见。

var detailsVisible = false;
function showDetails(obj){
	var margintop = obj.offsetParent.offsetTop;
	if(detailsVisible == false){
		$("#twitterDetails").css({top:margintop});
		$("#twitterDetails").show(); 
		detailsVisible = true;
	}else{
		$("#twitterDetails").animate({top:margintop},'fast');
	}
	$("#tdbox").jscroll({ 
						W:"15px"//设置滚动条宽度
                       ,BgUrl:"url(img/s_bg.gif)"//设置滚动条背景图片地址
                       ,Bg:"right 0 repeat-y"//设置滚动条背景图片position,颜色等
                       ,Bar:{Pos:"up"//设置滚动条初始化位置在底部
                       ,Bd:{Out:"#bcbcbc",Hover:"#ccc"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
                       ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
                       ,Btn:{btn:true//是否显示上下按钮 false为不显示
                       ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}//设置上按钮背景：鼠标离开(默认)，经过，点击
                       ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}//设置下按钮背景：鼠标离开(默认)，经过，点击
                       ,Fn:function(){}//滚动时候触发的方法
					});

}

$(document).ready(function() {
  $("#closeDetails").click(function(){
									$("#twitterDetails").hide(); 
									detailsVisible = false;
									});
});

其中jscroll为JQUERY的滚动条样式定制插件。