addLoadEvent函数
◆把现有的window.onload事件处理函数的值存入变量oldonload
◆如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它
◆如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
getNextElement函数
◆寻找下一个元素节点(不是下一个节点)
◆传入的参数是 element.nextSibling
function getNextElement(node) {
if(node.nodeType == 1) {
return node;
}
if(node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}
addClass函数
◆检查className属性是否为null
◆如果是,把新的class设置值直接赋值给className属性
◆如果不是,把一个空格和新的class设置值追加到className属性上去
function addClass(element,value) {
if(!element.className) {
element.className = value;
} else {
element.className = element.className + " " + value;
}
}
styleHeaderSibling函数
◆某一种标签隔行设置斑马线样式(表格、段落)
◆css3中有 nth-child() 和 nth-of-type() 之类的位置选择器
function styleHeaderSibling(tag,theclass) {
if(!document.getElementsByTagName) return false;
var elems = document.getElementsByTagName(tag);
var elem;
for(var i=0; i<elems.length; i++) {
elem = getNaxtElement(elems[i].nextSibling);
addClass(elem,theclass);
}
}
moveElement函数
◆获得元素的当前位置
◆如果元素已经到达它的目的地,则退出这个函数
◆如果元素尚未到达它的目的地,则把它向目的地移进一点
◆经过一段时间间隔之后重复上述步骤
function moveElement(elementID,final_x,final_y,interval) {
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if(elem.movement) {
clearTimeout(elem.movement);
}
if(!elem.style.left) {
elem.style.left = "0px";
}
if(!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var dist = 0;
if(xpos == final_x && ypos == final_y) {
return true;
}
if(xpos < final_x) {
dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x) {
dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if(ypos < final_y) {
dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if(ypos > final_y) {
dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
var dv = document.getElementById("dv");
document.getElementById("btn1").onclick = function(){
moveElement("dv",800,40,10);
}
document.getElementById("btn2").onclick = function(){
moveElement("dv",1600,40,10);
}