一个简单的鼠标划过切换效果

光明使者

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

复制代码

光明使者

貌似这是代码,不是教程或什么额.........