一个简单的鼠标划过切换效果_交互设计教程-查字典教程网

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

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

核心JavaScript代码:

//@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")}
   }
}