一個(gè)簡(jiǎn)單的js鼠標(biāo)劃過切換效果
更新時(shí)間:2010年06月30日 14:45:13 作者:
一個(gè)實(shí)用的簡(jiǎn)單的鼠標(biāo)劃過切換效果,附帶ie6兼容png js
上次幫朋友寫過的一個(gè)簡(jiǎn)單切換效果,超級(jí)簡(jiǎn)單,但也比較適用.因?yàn)橛玫搅薈SS Sprite技術(shù),DEMO中附帶了IE6兼容png的JS.

核心JavaScript代碼:點(diǎn)此查看DEMO
//@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)莫過事件
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)莫過效果,用CSS亦可以實(shí)現(xiàn),但相對(duì)煩瑣. 如果需要更酷更炫一點(diǎn)的效果,可點(diǎn)此查看cssrain寫的基于jQuery的氣泡提示效果.
原文發(fā)布于Mr.Think的個(gè)人博客: http://mrthink.net/script-mousechange-simple/

核心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)莫過事件
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)莫過效果,用CSS亦可以實(shí)現(xiàn),但相對(duì)煩瑣. 如果需要更酷更炫一點(diǎn)的效果,可點(diǎn)此查看cssrain寫的基于jQuery的氣泡提示效果.
原文發(fā)布于Mr.Think的個(gè)人博客: http://mrthink.net/script-mousechange-simple/
您可能感興趣的文章:
- js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動(dòng)切換-點(diǎn)擊左右按鈕切換特效代碼
- JS鼠標(biāo)滑過圖片時(shí)切換圖片實(shí)現(xiàn)思路
- JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的方法
- js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁(yè)面效果(類似360默認(rèn)頁(yè)面滾動(dòng)切換效果)
- js鼠標(biāo)點(diǎn)擊圖片切換效果代碼分享
- js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
- js鼠標(biāo)點(diǎn)擊圖片切換效果實(shí)現(xiàn)代碼
- JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的實(shí)例代碼
- JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換圖片的方法
- js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容
相關(guān)文章
js中位數(shù)不足自動(dòng)補(bǔ)位擴(kuò)展padLeft、padRight實(shí)現(xiàn)代碼
這篇文章主要介紹了js中位數(shù)不足自動(dòng)補(bǔ)位擴(kuò)展之padLeft、padRight實(shí)現(xiàn)方法,主要是通過String.prototype擴(kuò)展實(shí)現(xiàn),需要的朋友可以參考下2020-04-04微信小程序開發(fā)實(shí)現(xiàn)的選項(xiàng)卡(窗口頂部/底部TabBar)頁(yè)面切換功能圖文詳解
這篇文章主要介紹了微信小程序開發(fā)實(shí)現(xiàn)的選項(xiàng)卡(窗口頂部/底部TabBar)頁(yè)面切換功能,結(jié)合圖文與實(shí)例形式詳細(xì)分析了微信小程序選項(xiàng)卡切換相關(guān)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05區(qū)別JavaScript函數(shù)聲明與變量聲明
這篇文章給大家分享了關(guān)于JavaScript中函數(shù)聲明與變量聲明之間的區(qū)別以及相關(guān)知識(shí)點(diǎn),有興趣的朋友參考下。2018-09-09IE瀏覽器打印的頁(yè)眉頁(yè)腳設(shè)置解決方法
IE瀏覽器打印的頁(yè)眉頁(yè)腳設(shè)置解決方法2009-12-12js插件dropload上拉下滑加載數(shù)據(jù)實(shí)例解析
這篇文章主要為大家詳細(xì)解析了js插件dropload上拉下滑加載數(shù)據(jù)實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07淺析JavaScript Array和string的轉(zhuǎn)換(推薦)
下面小編就為大家?guī)硪黄獪\析JavaScript Array和string的轉(zhuǎn)換(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05