上次幫朋友寫過的一個簡單切換效果,超級簡單,但也比較適用.因為用到了CSS Sprite技術,DEMO中附帶了IE6兼容png的JS.

核心JavaScript代碼:點此查看DEMO

 1 //@Mr.Think獲取對象屬性兼容方法
 2  function $(objectId) {
 3 if(document.getElementById && document.getElementById(objectId)) {
 4     return document.getElementById(objectId);// W3C DOM
 5     } else if (document.all && document.all(objectId)) {
 6         return document.all(objectId);// MSIE 4 DOM
 7     } else if (document.layers && document.layers[objectId]) {
 8         return document.layers[objectId];// NN 4 DOM..this won't find nested layers
 9     } else {
10         return false;
11     }
12 }
13 //@Mr.Think切換顯示文字和背景圖位置
14 function iLeftNav(type) {
15     var inum,i_navinfo=$("i_navinfo");
16     if(type=="writeblog"){
17         inum="-300px";
18     }else if(type=="sharepic"){
19         inum="-600px";
20     }else if(type=="writemsg"){
21         inum="-900px";
22     }else{
23         inum="-300px";    
24     }
25     i_navinfo.innerHTML=$(type).innerHTML;
26     i_navinfo.style.backgroundPosition=inum+" 0";
27 }
28 //@Mr.Think加載鼠標莫過事件
29 window.onload=function(){
30     var liitem=$("i_blognav").getElementsByTagName("li");
31     for(var i=0; i<liitem.length; i++){
32         liitem[0].onmouseover=function(){iLeftNav("writeblog")}
33         liitem[1].onmouseover=function(){iLeftNav("sharepic")}
34         liitem[2].onmouseover=function(){iLeftNav("writemsg")}
35     }
36 }        

        

        
        
      
        
it知識庫：一個簡單的鼠標劃過切換效果，轉載需保留來源！
        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。