|
|
上次幫朋友寫(xiě)過(guò)的一個(gè)簡(jiǎn)單切換效果,超級(jí)簡(jiǎn)單,但也比較適用.因?yàn)橛玫搅?a title="什么是CSS Sprite技術(shù)?" href="http://wiki.blueidea.com/index.php?title=css_sprites" target="_blank">CSS Sprite技術(shù),DEMO中附帶了IE6兼容png的JS.
核心JavaScript代碼:點(diǎn)此查看DEMO
1 //@Mr.Think獲取對(duì)象屬性兼容方法
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加載鼠標(biāo)莫過(guò)事件
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知識(shí)庫(kù)：一個(gè)簡(jiǎn)單的鼠標(biāo)劃過(guò)切換效果，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
