Mr.Think

上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS.

核心JavaScript代码:点此查看DEMO

//@Mr.Think获取对象属性兼容方法
function $(objectId){
    if (document.getElementById && document.getElementById(objectId)) {
        return document.getElementById(objectId);// W3C DOM
    }
    else
        if (document.all && document.all(objectId)) {
            return document.all(objectId);// MSIE 4 DOM
        }
        else
            if (document.layers && document.layers[objectId]) {
                return document.layers[objectId];// NN 4 DOM..this won't find nested layers
            }
            else {
                return false;
            }
}

//@Mr.Think切换显示文字和背景图位置
function iLeftNav(type){
    var inum, i_navinfo = $("i_navinfo");
    if (type == "writeblog") {
        inum = "-300px";
    }
    else
        if (type == "sharepic") {
            inum = "-600px";
        }
        else
            if (type == "writemsg") {
                inum = "-900px";
            }
            else {
                inum = "-300px";
            }
    i_navinfo.innerHTML = $(type).innerHTML;
    i_navinfo.style.backgroundPosition = inum + " 0";
}

//@Mr.Think加载鼠标莫过事件
window.onload = function(){
    var liitem = $("i_blognav").getElementsByTagName("li");
    for (var i = 0; i < liitem.length; i++) {
        liitem[0].onmouseover = function(){
            iLeftNav("writeblog")
        }
        liitem[1].onmouseover = function(){
            iLeftNav("sharepic")
        }
        liitem[2].onmouseover = function(){
            iLeftNav("writemsg")
        }
    }
}

本文是一个简易的鼠标莫过效果, 如果需要更酷更炫一点的效果,可点此查看cssrain写的基于jQuery的气泡提示效果.