滚动栏动态调整与页面元素交互-优快云博客

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style>
.R_normal_frame {
	width: 227px;
	padding: 10px;
	margin-bottom: 10px;
}
.lable_count {
	background: #fdcca1;
	height: 7px;
	line-height: 0;
	font-size: 0;
}
  </style>
<script LANGUAGE="JavaScript" src="../jquery-1.7.min.js"></script>

<script>
$(function(){
	(function(){
		var bar = $("#right_scroll_bar .lable_count");

		bar.show();
		var divLib = [];
		$.each(bar,function() {
			var obj = $(this);
			divLib.push({div:obj,width:obj.width(),boo : true});
			obj.width(0);//将所有设置为0
		});
	 
		doA(1);
					
		function doA(mount,callback) {
			var length = 0;
			var i = 5;
			$.each(divLib,function() {
				this.boo =  true;
			});
			var timer = setInterval(function() {
				var divObj;
				$.each(divLib,function() {
						var div = this.div;
						if(mount > 0) {
							if(div.width() < this.width) {
								div.width(div.width()+i*mount);					
							}else if(this.boo){
								this.boo = false;
								length++;
							}
						}else {
							if(div.width() >0) {
								div.width(div.width()+i*mount);					
							}else if(this.boo){
								this.boo = false;
								length++;
							}
						}
					});
					if(length>=divLib.length) {
						clearInterval(timer);
						if(callback)callback();
					}
				},30);
			}
		})();	
})
</script>
</HEAD>
	<BODY>
		<div class="R_normal_frame">
			<table cellspacing="0" cellpadding="0" border="0" width="100%" id="right_scroll_bar">	  
				<tbody><tr>
					<td nowrap="nowrap" width="25%" class="font_blue">
						<a title="梁静茹" href="/ugc/queryUgcToneByTag.action?tagName=梁静茹&tagId=41">
							 梁静茹					
						</a>
					</td>
					<td width="60%"><div class="lable_count" style="width: 100px;"></div></td>
					<td nowrap="nowrap" width="15%" class="font_orange">4</td>
				  </tr>
			  
				<tr>
					<td nowrap="nowrap" width="25%" class="font_blue">
						<a title="夏天" href="/ugc/queryUgcToneByTag.action?tagName=夏天&tagId=54">
							 夏天							
						</a>
					</td>
					<td width="60%"><div class="lable_count" style="width: 75px;"></div></td>
					<td nowrap="nowrap" width="15%" class="font_orange">3</td>
				  </tr>	  
				</tbody>
			</table>
		</div>
	</BODY>
</HTML>
热门标签功能。
