|
|
核心JavaScript代碼:點(diǎn)此查看DEMO
復(fù)制代碼 代碼如下:
//@Mr.Think獲取對(duì)象屬性兼容方法
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加載鼠標(biāo)莫過(guò)事件
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")}
}
}
本文是一個(gè)簡(jiǎn)易的鼠標(biāo)莫過(guò)效果,用CSS亦可以實(shí)現(xiàn),但相對(duì)煩瑣. 如果需要更酷更炫一點(diǎn)的效果,可點(diǎn)此查看cssrain寫(xiě)的基于jQuery的氣泡提示效果.
原文發(fā)布于Mr.Think的個(gè)人博客: http://mrthink.NET/script-mousechange-simple/
JavaScript技術(shù)：一個(gè)簡(jiǎn)單的js鼠標(biāo)劃過(guò)切換效果，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
