网络编程
位置：首页>> 网络编程>> JavaScript>> 一个简单的鼠标划过切换效果js源码

一个简单的鼠标划过切换效果js源码

作者：Mr.Think　来源：Mr.Think　发布时间：2010-06-21 10:55:00　

标签：CSS,Sprite,ie6,鼠标,切换

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

核心JavaScript代码:点此查看DEMO


//获取对象属性兼容方法
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;
    }
}
//切换显示文字和背景图位置
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";
}
//加载鼠标莫过事件
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的气泡提示效果.

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com