上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了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")}

}

}

本文是一个简易的鼠标莫过效果,用CSS亦可以实现,但相对烦琐. 如果需要更酷更炫一点的效果,可点此查看cssrain写的基于jQuery的气泡提示效果.

原文发布于Mr.Think的个人博客: http://mrthink.net/script-mousechange-simple/