간단 한 js 마우스 스 크 래 치 전환 효과

지난번 에 친 구 를 도와 쓴 간단 한 전환 효 과 는 매우 간단 하지만 비교적 적 용 됩 니 다.CSS Sprite 기술 을 사 용 했 기 때문에 DEMO 에는 IE6 호 환 png 의 JS핵심 자 바스 크 립 트 코드 가 첨부 되 어 있 습 니 다.이 를 클릭 하여 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 기반 기포 알림 효 과 를 확인 하려 면 누 르 십시오.http://mrthink.net/script-mousechange-simple/