간단한 js 마우스 오버 전환 effect_javascript 기술

지난번에 친구를 위해 간단한 전환 효과를 작성했습니다. CSS Sprite 기술을 사용하기 때문에 DEMO에는 IE6 호환 png JS가 함께 제공됩니다. 코드: 데모를 보려면 여기를 클릭하세요

코드 복사 코드는 다음과 같습니다: // @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.. 중첩된 레이어를 찾을 수 없습니다.
} 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; iliitem[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/