Mr.Think

奇或偶数行高亮显示及鼠标莫过高亮显示,一个经常用到的效果,也能谷歌到大把的这种效果JS,但好像还没有一个封装成类直接用的.想象自己当初谷歌这个类时,还真没少折腾时间.
花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码.
核心JavaScript代码:点此查看DEMO

//@Mr.Think---添加样式的类
function addClass(elem, value){
    if (!elem.className) {
        elem.className = value;
    }
    else {
        var newClass = elem.className;
        newClass += " ";
        newClass += value;
        elem.className = newClass;
    }
}

//@Mr.Think---奇或偶数行高亮显示及鼠标划过高亮显示
function highLight(elemid, tagName, tagNameHighClass, crossTagNameClass){
    if (!document.getElementsByTagName)
        return false;
    if (!document.getElementById)
        return false;
    if (!document.getElementById(elemid))
        return false;
    var elemid = document.getElementById(elemid);
    tagNames = elemid.getElementsByTagName(tagName);
    //奇数行高亮显示
    var odd = true;//它的值决定是奇数高亮显示还是偶数高亮显示
    for (var i = 0; i < tagNames.length; i++) {
        if (odd == true) {
            addClass(tagNames[i], tagNameHighClass)
            odd = false;
        }
        else {
            odd = true;
        }
    }
    //鼠标划过高亮显示
    for (var m = 0; m < tagNames.length; m++) {
        tagNames[m].oldClassName = tagNames[m].className;
        tagNames[m].onmouseover = function(){
            addClass(this, crossTagNameClass);
        }
        tagNames[m].onmouseout = function(){
            this.className = this.oldClassName;
        }
    }
}

参数说明:

使用说明:

window.onload = function highYourElem(){
    highLight("yourId", "yourTagName", "yourHighClass", "yourCrossClass");
}

分享一个简易的动画效果类,思路源于JavaScript DOM编程艺术,这本书是我JavaScript的启蒙书,看过四篇,至今时常翻起.我想也是每个JavaScript初学者的必备书.Mr.Think非常推崇这本书,真的很棒!
思路其实很基础,很简单,主要是通过setTimeout()方法,并利用CSS绝对定位来以改变图片位置以实现动画效果.纯DOM方式编写,兼容所有支持JavaScript的浏览器及其他API.
动画效果类核心JavaScript代码:点此查看DEMO

//@Mr.Think---简易动画类
function moveElem(elemId, final_x, final_y, interval){
    if (!document.getElementById)
        return false;
    if (!document.getElementById(elemId))
        return false;
    var elem = document.getElementById(elemId);
    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);
    if (xpos == final_x && ypos == final_y)
        return true;
    if (xpos < final_x) {
        var divisor = Math.ceil((final_x - xpos) / 10);
        xpos = xpos + divisor;
    }
    if (xpos > final_x) {
        var divisor = Math.ceil((xpos - final_x) / 10);
        xpos = xpos - divisor;
    }
    if (ypos < final_y) {
        var divisor = Math.ceil((final_y - ypos) / 10);
        ypos = ypos + divisor;
    }
    if (ypos > final_y) {
        var divisor = Math.ceil((ypos - final_y) / 10);
        ypos = ypos - divisor;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeatelem = "moveElem('" + elemId + "'," + final_x + "," + final_y + "," + interval + ")";
    elem.movement = setTimeout(repeatelem, interval);
}