萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 奇或偶數行高亮顯示及鼠標劃過高亮顯示類

奇或偶數行高亮顯示及鼠標劃過高亮顯示類

奇或偶數行高亮顯示及鼠標莫過高亮顯示,一個經常用到的效果,也能谷歌到大把的這種效果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");
}

copyright © 萬盛學電腦網 all rights reserved