[JS]橫跨五大瀏覽器-滑鼠滑入動態改變影像
分類：Dreamweaver» Javascript | 發表日:2009-03-06 | 瀏覽：6,209人次-
加入書籤：
photobook.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5" /> <title>網路相簿</title> <script type="text/javascript"> var num=1; var _ie = true; //判斷瀏覽器 function mm_borwser(){ if (window.XMLHttpRequest) { //Mozilla, Safari,...IE7 if(!window.ActiveXObject){// Mozilla, Safari,... _ie = false; document.getElementById("mmmm_showpic").innerHTML="<img src=\"img/C301b.jpg\" width=\"550\" height=\"367\" id=\"showimg\" style=\"-moz-opacity:0\"/>"; mm_fadein(); } } if(_ie){//IE6 document.getElementById("mmmm_showpic").innerHTML="<img src=\"img/C301b.jpg\" width=\"550\" height=\"367\" id=\"showimg\" style=\"filter:alpha(opacity=0);\"/>"; mm_fadein(); } } //圖片預載 function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //大圖載入 function mm_showpic(img){ if(!_ie){// Mozilla, Safari,... document.getElementById("showimg").style.MozOpacity=0; }else{//IE6 document.getElementById("showimg").filters.alpha.opacity=0; } document.getElementById("showimg").src = img; mm_fadein(1); } //淡化效果 function mm_fadein(n){ if(!_ie){// Mozilla, Safari,... var n; if(n==1){ num=1; } if(num !=20) { num+=1; document.getElementById("showimg").style.MozOpacity=num/20; } }else{//IE6 var n; if(n==1){ num=1; } if(num !=100) { num+=3; document.getElementById("showimg").filters.alpha.opacity=num; } } setTimeout('mm_fadein()',0.01); //設定圖片變化速度 } </script> </head> <body onLoad="mm_borwser();MM_preloadImages('img/C301b.jpg','img/C302b.jpg','img/C303b.jpg','img/C304b.jpg','img/C305b.jpg')"> <table width="400" border="0" cellpadding="3" cellspacing="3" bgcolor="#CCCCCC"> <tr> <td height="367" colspan="5" align="center" valign="middle"> <div id="mmmm_showpic"></div></td> </tr> <tr> <td align="center" valign="middle" bgcolor="#FFFFFF"> <img src="img/C301s.jpg" width="80" height="53" onMouseOver="mm_showpic('img/C301b.jpg');" style="cursor:pointer;"/></td> <td align="center" valign="middle" bgcolor="#FFFFFF"> <img src="img/C302s.jpg" width="80" height="53" onMouseOver="mm_showpic('img/C302b.jpg');" style="cursor:pointer;"/></td> <td align="center" valign="middle" bgcolor="#FFFFFF"> <img src="img/C303s.jpg" width="80" height="53" onMouseOver="mm_showpic('img/C303b.jpg');" style="cursor:pointer;"/></td> <td align="center" valign="middle" bgcolor="#FFFFFF"> <img src="img/C304s.jpg" width="80" height="53" onMouseOver="mm_showpic('img/C304b.jpg');" style="cursor:pointer;"/></td> <td align="center" valign="middle" bgcolor="#FFFFFF"> <img src="img/C305s.jpg" width="80" height="53" onMouseOver="mm_showpic('img/C305b.jpg');" style="cursor:pointer;"/></td> </tr> </table> </body> </html> |
[範例預覽] [範例下載]
標籤： Dreamweaver, Javascript, moueover, mouseout, 沒問題, 滑入改變影像, 網頁標準化
引用網址： ※如有發現掉圖或檔案無法下載，請由回應區留言告知，將會盡速處理！謝謝～
※本站採用CC授權請勿全文轉貼本站文章，歡迎「部份引用」與介紹，並註明出處~謝謝~~。
引用網址： ※如有發現掉圖或檔案無法下載，請由回應區留言告知，將會盡速處理！謝謝～
※本站採用CC授權請勿全文轉貼本站文章，歡迎「部份引用」與介紹，並註明出處~謝謝~~。
回應本篇
10 梅-licufa 說：
[WebSite]
你的博客很不错，我做了一个将1000个博客链接拼成一幅大图的博客拼图网，其中就收录了你的博客，欢迎你来找找看，也欢迎交换链接。我的博客，面谱 http://www.mianpu1000.com
2009 年 03 月 07 日 | 16:48:20
9 梅-J 說：
很受用的技巧～謝謝梅干老師！（有機會在去上老師的課程）
回應：
呵～～別這麼客氣～
這一切都要感謝男丁老師～
呵～～別這麼客氣～
這一切都要感謝男丁老師～
2009 年 03 月 12 日 | 13:06:12
8 梅-K 說：
老師您好
若果有多於5張圖片,而於重新整理網頁時,
隨機抽選5張如範例般顯示的話, 該怎麼作呢?
回應：
就如同DW中建立滑出滑入影像一樣，
直接再往下新增就可以了，
然後在body的地方再將新增的影像加到預載中就可以了
就如同DW中建立滑出滑入影像一樣，
直接再往下新增就可以了，
然後在body的地方再將新增的影像加到預載中就可以了
2009 年 04 月 10 日 | 22:34:35
7 梅-K 說：
若果像這樣一開始: 1 2 3 4 5 (有多於5張圖)
重新整理後變成: 1 2 3 6 5 (限定於5張小圖)
應怎去編寫呢?
要先寫一個loop嗎?
謝謝梅老師
回應：
不用滴！
它會自已去掃目前有多少項目～～
只需增加就行了～
不用滴！
它會自已去掃目前有多少項目～～
只需增加就行了～
2009 年 04 月 11 日 | 12:15:44
6 梅-K 說：
老師您好
我還是js的新手,很多東西不太懂…
直接再往下新增是指在table中加入新的嗎?
增加後,新加入的圖能顯示,但弄出了6個區塊在下方
請問是哪裡弄錯了嗎?
回應：
＜img src=』img/C306s.jpg』 width=』80″ height=』53″ onMouseOver=』mm_showpic(‘img/C306b.jpg’);』 style=』cursor:pointer;』/>
將子就行了
＜img src=』img/C306s.jpg』 width=』80″ height=』53″ onMouseOver=』mm_showpic(‘img/C306b.jpg’);』 style=』cursor:pointer;』/>
將子就行了
2009 年 04 月 11 日 | 17:54:20
5 梅-K 說：
對不起
請問如果一開始顯示5張圖,若果重新載入後,把原來的那幾張換成別的5張…
就這樣加入的話,第6張圖就會跑出來了…
謝謝梅干老師
回應：
你是希望比方有１０張影像，
重整時，隨機抓取五張嗎？
是這個意思嗎？
你是希望比方有１０張影像，
重整時，隨機抓取五張嗎？
是這個意思嗎？
2009 年 04 月 12 日 | 21:17:02
4 梅-K 說：
恩恩~~
正好是老師所說的那種效果
該怎麼作比較好呢?
謝謝梅干老師
回應：
關於這部分會比較麻煩點，
要在載入前先抓到再動態產生在下面的選單中，
會有點小複雜～
關於這部分會比較麻煩點，
要在載入前先抓到再動態產生在下面的選單中，
會有點小複雜～
2009 年 04 月 13 日 | 11:47:52
3 梅-Dbin 說：
老師可以分享您網頁中上面的1.2.3.4.5按鈕~淡出淡入變化效果的範例嗎?感覺用途更多地方可以使用呢~希望可以造福我們@@
回應：
不太明白你的意思也～～
那邊的12345按鈕
不太明白你的意思也～～
那邊的12345按鈕
2010 年 02 月 07 日 | 22:33:39
2 梅-小鈺 說：
請問一下唷 我想用成這樣 呈現圖片跟他的介紹文字應該要怎麼用???
還是只能呈現圖片??? 要把字變成圖片才可以??
回應：
你可以將文字放在一個標籤中，
再用attr去抓取文字，再把它秀到要出現的區塊中就可以了
你可以將文字放在一個標籤中，
再用attr去抓取文字，再把它秀到要出現的區塊中就可以了
2010 年 05 月 18 日 | 22:50:53
1 梅-小鈺 說：
對不起唷~我不懂你的意思耶 ˊˋ
謝謝~
2010 年 05 月 21 日 | 00:10:48
嗯嗯~~
不過我記得這個用 jqueryUI 可以做到耶~
好像比較穩
恩恩！！男丁也有給我一份jQuery版～
穩定應該是都差不多！！