您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> 交互设计 >> 正文

奇或偶数行高亮显示及鼠标划过高亮显示类

作者:佚名    责任编辑:admin    更新时间:2022-06-22

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

//@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;
        }
    }
}

参数说明:

1.elemid:事件ID,就是你想实现这种效果所在ID;
2.tagName:事件tagName值,比如li,tr,p等等;
3.tagNameHighClass:奇或偶数行高亮显示的样式;
4.crossTagNameClass:鼠标划过时高亮显示的样式.

使用说明:

1.如果你只想要其中一个效果,在类中,删除对应的不需要的代码,有注释;
2.调用(加载函数建议用本文中的加载函数,用window.onload非明智之举):

 

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