シンプルなjsマウスオーバー切り替えエフェクト_javascriptスキル

前回、友人のために簡単な切り替えエフェクトを書きました。これは非常にシンプルですが、CSS スプライト テクノロジを使用しているため、デモには

Core 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..これではネストされたレイヤーが見つかりません
} 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_naviinfo.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/