日期:2014-05-16  浏览次数:20328 次

JavaScript实用总结(二:代码)
        1.切换背景图片
$(document).ready(function() {
	$(".btn.large.contempt").mouseover(function() {     
		$(".btn.large.contempt").css('background-image','url(img/test.png)');
	});
	$(".btn.large.contempt").mouseout(function() {
		$(".btn.large.contempt").css('background-image','');
	});    
});

       2.JS控制相对定位
var select = $("#intervalType");
var offset = select.offset();
var left = offset.left;
var top = offset.top;
$("#timetc").css("position", "absolute").css("border", "0px solid red").css("left", left + select.width() + "px").css("top", top + select.height() + "px").show();

       3.滚动标题栏
function createDynamicTR () {
	var tr = document.getElementById("id_tr");
	if (null != tr) {
		//
		var table = document.getElementById("tab");					
		//
		var newTable = document.createElement("table");
		newTable.id = "id_tab";
		newTable.name = "name_tab";
		newTable.style.position = "absolute";
		newTable.style.top = table.offsetTop;
		newTable.style.left = table.offsetLeft - 5 + "px";
		newTable.style.width = table.offsetWidth;
		newTable.style.backgroundColor = "cyan";
		
		var newTr = newTable.insertRow(0);
		var nodes = tr.childNodes;
		for (var j = 0 , end = nodes.length ; j < end ; j++) {
			var td = newTr.insertCell(j);
			var val = nodes[j].innerHTML;
			if (typeof(val) != "undefined") {
				td.innerHTML = val;
				td.width = nodes[j].offsetWidth;
			}
		}
		newTable.style.display = "none";
		document.body.appendChild(newTable);
	} 
}

function autoScroll() {
	//var scrollTop = document.body.scrollTop;  当页面在其他iframe里面时使用
	var scrollTop = document.documentElement.scrollTop + document.body.scrollTop; 	//单独页面
	//
	var table = document.getElementById("tab");		
	var newTable = document.getElementById("id_tab");	
	if (null == newTable || typeof(newTable) == "undefined") {
		createDynamicTR ();
		newTable = document.getElementById("id_tab");
	}
	if(scrollTop >= 40){	
		newTable.style.display = "";
		newTable.style.width = table.offsetWidth;
		newTable.style.top = scrollTop + "px";   
	}else{
		if (null != newTable) {
			newTable.style.display = "none";
		}
	}
}
window.onscroll = autoScroll; 
window.onresize = autoScroll;

       4.为表格生成空的列
/**
 * 添加空的表格列数据 
 */
function appendEmptyTr (tab, cols, rows) {
	//td
	var tds = "";
	for (var i = 0; i < cols; i++) {
		tds += "<td style='height:30px;'>&nbsp;</td>";
	}
	//需要在哪一行前插入数据
	var ltr = $("#" + tab);
	//tr
	for (var j = 0; j < rows; j++) {
		var tr = "<tr ";
		if (j % 2 == 0) {	
			tr += " class=\"tabtr\"";
		} else {
			tr += " class=\"tabtr2\"";
		}
		tr += ">";
		tr += tds;
		tr += "</tr>";
		$(tr).insertBefore(ltr);
	}
} 

       5、setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
var timeOutId;
function filterUser (value) {
	clearTimeout(timeOutId);
	timeOutId = setTimeout(function(){
		//......
	}, 500);
}